不允许使用两个下拉菜单选择相同的值

Question

我想防止用户在这个表单中两次选择相同的值

<select name="indication_subject[]">
  <option value="" selected="selected">a </option>
  <option> Accounting</option>
  <option> Afrikaans</option>
  <option> Applied Information and Communication Technology</option>
  <option> Arabic</option>
  <option> Art and Design</option>
  <option> Biology</option>
  <option> Business Studies</option>
</select>

<select name="indication_subject[]">
  <option value="" selected="selected">a </option>
  <option> Accounting</option>
  <option> Afrikaans</option>
  <option> Applied Information and Communication Technology</option>
  <option> Arabic</option>
  <option> Art and Design</option>
  <option> Biology</option>
  <option> Business Studies</option>
</select>

Answer 1

我不确定你是如何选择元素的，所以为了简单起见，我会给它们一个 ID。

示例： http://jsfiddle.net/x4E5Q/1/

function preventDupes( select, index ) {
    var options = select.options,
        len = options.length;
    while( len-- ) {
        options[ len ].disabled = false;
    }
    select.options[ index ].disabled = true;
    if( index === select.selectedIndex ) {
        alert('You\'ve already selected the item "' + select.options[index].text + '".\n\nPlease choose another.');
        this.selectedIndex = 0;
    }
}

var select1 = select = document.getElementById( 'select1' );
var select2 = select = document.getElementById( 'select2' );

select1.onchange = function() {
    preventDupes.call(this, select2, this.selectedIndex );
};

select2.onchange = function() {
    preventDupes.call(this, select1, this.selectedIndex );
};

html

<select id="select1" name="indication_subject[]">
  <option value="" selected="selected">a </option>
  <option> Accounting</option>
  <option> Afrikaans</option>
  <!-- ...and so on... -->

<select id="select2" name="indication_subject[]">
  <option value="" selected="selected">a </option>
  <option> Accounting</option>
  <option> Afrikaans</option>
  <!-- ...and so on... -->

---

编辑： 更改为处理不支持.disabled 的浏览器。感谢@Zoidberg。

Answer 2

最终，如果您负担得起房地产，我会改用单选按钮或复选框，并且最多只允许他们选择 2 个复选框。对我来说，下拉菜单在这种情况下不起作用

但是，如果您没有房地产并且必须使用下拉菜单，那么您最好的选择是，一旦他们在第一个下拉菜单中选择了一个值，在第二个下拉菜单中禁用或删除它，反之亦然反之亦然（如果他们在第一个中选择一个值）。我建议禁用而不是删除，因为用户会更清楚发生了什么。

<select id="subject1" onchange="updateSelect(this,'subject2');" name="indication_subject[]">
  <option value="" selected="selected">a </option>
  <option value="1"> Accounting</option>
  <option value="2"> Afrikaans</option>
  <option value="3"> Applied Information and Communication Technology</option>
  <option value="4"> Arabic</option>
  <option value="5"> Art and Design</option>
  <option value="6"> Biology</option>
  <option value="7"> Business Studies</option>
</select>

<select id="subject2" name="indication_subject[]" onchange="updateSelect(this,'subject1');" >
  <option value="" selected="selected">a </option>
  <option value="1"> Accounting</option>
  <option value="2"> Afrikaans</option>
  <option value="3"> Applied Information and Communication Technology</option>
  <option value="4"> Arabic</option>
  <option value="5"> Art and Design</option>
  <option value="6"> Biology</option>
  <option value="7"> Business Studies</option>
</select>

然后是与之配套的js

function updateSelect(changedSelect, selectId) {
   var otherSelect = document.getElementById(selectId);
   for (var i = 0; i < otherSelect.options.length; ++i) {
       otherSelect.options[i].disabled = false;
   }
   if (changedSelect.selectedIndex == 0) {
      return;
   }
   otherSelect.options[changedSelect.selectedIndex].disabled = true;
}

唯一的问题是，IE 7 和更早的版本不支持禁用。如果这是一个交易破坏者，那么您将不得不从“其他选择”中删除该选项，然后再将其替换。唯一的问题是它会改变选项的顺序，除非你刷新整个列表。要刷新整个列表，您需要将选项和值存储在一个永远不会更改的数组（有点像模型）中，并用于在更改事件发生时更新选择。

Answer 3

试试这个，在选择 1 中添加 id="indication_subject1"。 和 id="indication_subject2" 在选择 2 中。

Javascript：

$('#indication_subject1').change(function(){
    var indication_subject1 = $('#indication_subject1').val();
    var indication_subject2 = $('#indication_subject2').val();

    if (indication_subject1 == indication_subject1)
        {
            $('#indication_subject2').prop('selectedIndex',0);// val = "" selected, or you can add alert('Can't select same value!')

        }
});

$('#indication_subject2').change(function(){
    var indication_subject1 = $('#indication_subject1').val();
    var indication_subject2 = $('#indication_subject2').val();

    if (indication_subject2 == indication_subject1)
    {
        $('#indication_subject1').prop('selectedIndex',0);
    }
});