下記のように、select要素を2つ用意し、果物か魚を撰択すると、それに応じた2番目のselect要素が表示されるようなコードを作りました。
見た目の問題はないのですが、1つ目で魚を撰択し、あじやさんまを撰択しても、最終的にフォームが送信される時には
果物のvalueが参照されてしまいます。
jqueryのhiddenで隠しているだけなので、果物用のselect要素が裏に潜んでいるためにこういった結果になっているかと思うのですが
この問題を解決するためにはどうしたらよいのでしょうか。
<form id="test">
<select id="type">
<option value="fruit">果物</option>
<option value="fish">魚</option>
</select>
<select name="sample" id="fruit">
<option value="apple">りんご</option>
<option value="orange">おれんじ</option>
</select>
<select name="sample" id="fish">
<option value="aji">あじ</option>
<option value="sanma">さんま</option>
</select>
<input type="submit" >
</form>
// はじめは全て隠しておく
$('#fruit').hide();
$('#fish').hide();
$('#type').change(function(){
var type = $(this).val();
if (type == 'fruit') {
$('#fruit').show();
$('#fish').hide();
} else {
$('#fruit').hide();
$('#fish').show();
}
});
$('form').submit(function(){
var result = $('form [name=sample]').val();
alert(result);
return false;
});
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
こんにちは。
送信前の
var result = $('form [name=sample]').val();
を
var result = $('form [name=sample]:visible').val();
に変更すると表示されている方の値を取得することが出来ますが、送信先の内容は同じく果物のほうが入っていってしまうと思います。
なので以下のようにしてみました。
動作はコメントを参考にしてみてください。
disableを付与することによりサーバ上に送信される方を制御していますのでサーバ上ではsampleを取得すればどちらかの値が入ってきます。
またはhidden要素を一つ用意してそこに
var result = $('form [name=sample]:visible').val();
の値をセットするようにすれば以下のような制御はいりません。
$().ready ( function() {
// とりあえず非表示
$('#fruit').hide();
$('#fish').hide();
$('#type').change(function(){
var type = $(this).val();
// 状態を変更する
setStatus ( 'fruit', type === 'fruit' );
setStatus ( 'fish', type === 'fish' );
});
$('form').submit(function(){
// 表示されている方のname="sample"要素を取得する
var result = $('form [name=sample]:visible').val();
alert(result);
});
function setStatus ( id, disp ) {
// 引数のidの表示状態をtrueまたはfalseで設定
var $obj = $('#'+id).toggle(disp);
if ( !disp ) {
// 非表示にした要素にdisabled属性を追加する
$obj.attr('disabled','disabled');
} else {
// 表示した要素からdisabled属性を除去する
$obj.removeAttr('disabled');
}
}
});
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
連動プルダウンのclonenode
-
複数のプルダウンを1つにまとめ...
-
プルダウン選択を変更すると、...
-
スマホのフォームでのselect複...
-
<input>の選択肢をプルダウンメ...
-
selectを変更不可にしたい
-
2段階連動セレクトボックスでの...
-
option 選択による表示&非表示
-
javascriptでセレクトボックス...
-
ボタンを押したらラジオボタン...
-
selectボックスの選択結果を変...
-
セレクトボックスで警告
-
プルダウンの値によって活性・...
-
【JavaScript】プルダウンで数...
-
セレクトボックスで、最後にク...
-
JavaScript プルダウンメニュ...
-
セレクトボックスを2つ選択して...
-
データベースからのarray を j...
-
プルダウンの値をphpファイルへ...
-
VBScriptでHTMLのセレクトボッ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン選択を変更すると、...
-
<input>の選択肢をプルダウンメ...
-
Selectボックスの一覧表示方法
-
javascriptでセレクトボックス...
-
同じ名前のセレクトがある場合...
-
全てのselect要素をデフォルト...
-
【javascript】連想配列からセ...
-
スマホのフォームでのselect複...
-
selectを変更不可にしたい
-
JavaScriptで<select>の<option...
-
複数のプルダウンを1つにまとめ...
-
プルダウンの値によって活性・...
-
VBScriptでHTMLのセレクトボッ...
-
webページの一部のみの更新につ...
-
selectのすべての値を送信する方法
-
javascript:データを日本語で...
-
プルダウンのoptionの表示・非...
-
リストボックス内の重複したも...
-
select要素のvalueを配列で取得...
-
C#(csファイル)とjavascriptと...
おすすめ情報