同時に動作するようにいくつかの選択ボックスを処理したい。select1a、select1b、または select1c でオプションを選択する場合、これら 3 つの値は同じである必要があります。それに加えて、選択した値は、3 つの選択ボックスの他のグループで無効にする必要があります。select2a、select2b、select2c は同じように反応するはずです。
ここ stacoverflow でいくつかのコードを見つけて、それをまとめただけですが、Firefox、Opera 15、または Safari ではなく、Opera 12 でのみ機能します。たぶん、誰かが私の問題の簡単なヒントを教えてくれるでしょうか?
JS:
$('#select1a, #select1b, #select1c').change(function() {
$('#select1a, #select1b, #select1c').not(this)
.children('option[value=' + this.value + ']')
.attr('selected', true)
.siblings().removeAttr('selected');
$('#select2a, #select2b,#select2c').not(this)
.children('option[value=' + this.value + ']')
.attr('disabled', true)
.siblings().removeAttr('disabled');
});
$('#select2a, #select2b, #select2c').change(function() {
$('#select2a, #select2b, #select2c').not(this)
.children('option[value=' + this.value + ']')
.attr('selected', true)
.siblings().removeAttr('selected');
$('#select1a, #select1b,#select1c').not(this)
.children('option[value=' + this.value + ']')
.attr('disabled', true)
.siblings().removeAttr('disabled');
});
HTML
<table>
<tr>
<td>
<select id="select1a" name="select1a" size="5">
<option value="1">2-3</option>
<option value="2" disabled="disabled">4</option>
<option value="3">5-6</option>
<option value="4">16</option>
<option value="5" selected="selected">17-18</option>
</select>
</td>
<td>
<select id="select1b" name="frage_1" size="5">
<option value="1">Text 1</option>
<option value="2" disabled="disabled">Text 2</option>
<option value="3">Text 3</option>
<option value="4">Text 4</option>
<option value="5" selected="selected">Text 5</option>
</select>
</td>
<td>
<select id="select1c" name="select1c" size="5">
<option value="1">7</option>
<option value="2" disabled="disabled">15</option>
<option value="3">10</option>
<option value="4">15</option>
<option value="5" selected="selected">7</option>
</select>
</td>
</tr>
<tr>
<td>
<select id="select2a" name="select2a" size="5">
<option value="1">2-3</option>
<option value="2" selected="selected">4</option>
<option value="3">5-6</option>
<option value="4">16</option>
<option value="5" disabled="disabled">17-18</option>
</select>
</td>
<td>
<select id="select2b" name="frage_2" size="5">
<option value="1">Text 1</option>
<option value="2" selected="selected">Text 2</option>
<option value="3">Text 3</option>
<option value="4">Text 4</option>
<option value="5" disabled="disabled">Text 5</option>
</select>
</td>
<td>
<select id="select2c" name="select2c" size="5">
<option value="1">7</option>
<option value="2" selected="selected">15</option>
<option value="3">10</option>
<option value="4">15</option>
<option value="5" disabled="disabled">7</option>
</select>
</td>
</tr>
</table>