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

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

使用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);
    }
});

不允许使用两个下拉列表选择相同的值

3 个答案: