Question

我想处理一些选择框以同时表现。在select1a中选择一个选项时，选择1b或选择1c，这三个值应该相同。除此之外，应在另外一组三个选择框中禁用所选值。 select2a，select2b和select2c应该以相同的方式做出反应。

我在stacoverflow上发现了一些代码，我只是将它们剪切在一起，但它只适用于Opera 12，而不适用于Firefox或Opera 15或Safari。也许有人可以给我一个快速暗示我的问题？

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>

Answer 1

按如下方式更新您的JS，它将起作用：

  $('#select1a, #select1b, #select1c').change(function () {
      $('#select1a, #select1b, #select1c').not(this).val($(this).val());
      $('#select2a,  #select2b, #select2c').find('option:not([value="' + $(this).val() + '"])').removeAttr("disabled");
      $('#select2a,  #select2b, #select2c').find('option[value="' + $(this).val() + '"]').attr("disabled", "disabled");
  });

  $('#select2a, #select2b, #select2c').change(function () {
      $('#select2a, #select2b, #select2c').not(this).val($(this).val());
      $('#select1a,  #select1b, #select1c').find('option:not([value="' + $(this).val() + '"])').removeAttr("disabled");
      $('#select1a,  #select1b, #select1c').find('option[value="' + $(this).val() + '"]').attr("disabled", "disabled");
  });

Fiddle

一次选择和禁用6个选择元素中的选项

1 个答案: