私が示唆したように、私はオプションタグを隠す代わりに削除することにしました。ここには完全な作業用HTMLファイルがあります。私はjsfiddleに投稿するつもりでしたが、何らかの理由でうまくいきませんでした。 .changeハンドラにコピー/ペーストエラーのがあります。なぜそれが動作していないのか疑問に思っていましたが、コピー/ペーストエラーでした。
このコードは、すべての選択タグに同じオプションがある場合にのみ機能することに注意してください。ただし、後でオプションを追加または削除しても、指定したとおりに同期を維持すると動的に機能します。
同じオプションのリストだけで動作する必要がある場合は、オプションにIDを設定してから、子に索引付けするのではなく、そのオプションに基づいて非表示にする基本的な仕組みは同じです。
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<style type="text/css">
.gone {display: none;}
</style>
<script type="text/javascript">
$(document).ready(function() {
// hides the option selected in the others
var hideValue = function(oldval, val, options, others) {
var unhideChild = -1;
var hideChild = -1;
// find which child to hide in the others
// also find the value we change from and unhide it
for (var i=1; i<options.length; i++) {
var optval = $(options[i]).val();
console.log(optval);
if (optval == val) {
hideChild = i;
}
if (optval == oldval) {
unhideChild = i;
}
}
if (unhideChild == -1 && oldval != "None") {
console.log("uh oh");
return;
}
if (hideChild == -1 && val != "None") {
console.log("uh oh");
return;
}
// hide them using the passed in selectors
for (var j=0; j<others.length; j++) {
if (oldval != "None") {
console.log("unhiding: " + others[j] + " v: " + unhideChild);
$($(others[j]).children()[unhideChild]).removeClass("gone");
}
if (val != "None") {
console.log("hiding: " + others[j] + " v: " + hideChild);
$($(others[j]).children()[hideChild]).addClass("gone");
}
}
}
// we need to keep track of the old values so we can unhide them if deselected
var val1 = "None";
var val2 = "None";
var val3 = "None"
$('#101_1').change(function() {
var opts = $('#101_1').children();
var v = $('#101_1').val();
hideValue(val1, v, opts, ["#101_2", "#101_3"]);
val1 = v;
});
$('#101_2').change(function() {
var opts = $('#101_2').children();
var v = $('#101_2').val();
hideValue(val2, v, opts, ["#101_1", "#101_3"]);
val2 = v;
});
$('#101_3').change(function() {
var opts = $('#101_3').children();
var v = $('#101_3').val();
hideValue(val3, v, opts, ["#101_2", "#101_1"]);
val3 = v;
});
});
</script>
</head>
<body>
<select value="None" id="101_1">
<option value="None">None</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select value="None" id="101_2">
<option value="None">None</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select value="None" id="101_3">
<option value="None">None</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</body>
</html>
また、「なし」の値がない場合は、それを削除してください。次に選択された選択肢101_1を選択し、選択した101_2を選択します。その後、変更ハンドラを起動させます。また、Noneオプションがなければ、forループはi = 0で始める必要があります。
は
だから基本的には、スクリプトの最後にこれを追加し、私はこれに非常に新しいです、どこでこれを従っていましたので、開始することを知らない@pedrolobito 0ではなく
$('#101_1').val('0');
$('#101_2').val('1');
$('#101_3').val('2');
$('#101_1').trigger('change');
$('#101_2').trigger('change');
$('#101_3').trigger('change');
1の時に始まり確認VARを作ります http://stackoverflow.com/questions/1280499/jquery-set-select-index –