jqueryでselect要素を表示・非表示する方

下記のように、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;
});

No.1 回答者： LancerVII 回答日時： 2013/03/12 08:32

こんにちは。

送信前の
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');
}
}
});