javascript - not allow select same value with two dropdown - Stack Overflow

admin管理员组

文章数量:1323355

I want to prevent the user from selecting the same value twice in this form

<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>

I want to prevent the user from selecting the same value twice in this form

<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>

• javascript
• validation
• forms

Share Improve this question Follow edited Mar 2, 2011 at 13:40 Zoidberg 10.3k22 gold badges3333 silver badges5353 bronze badges asked Mar 2, 2011 at 13:34 wymanwyman 2111 gold badge11 silver badge33 bronze badges 6

• 1 Can you use jquery or does it have to be plain javascript? And wha do you have two selects with not only the same options but also the same name? – ThiefMaster Commented Mar 2, 2011 at 13:40
• What about using some checkboxes named "indication_subject[accounting]", "indication_subject[afrikaans]", etc, instead of two select boxes? This will allow the user choose a variable number of distinct items. Of course, this wouldn't help if you want the user to choose exactly two items. – redShadow Commented Mar 2, 2011 at 13:43
• @ThiefMaster Using the same name for more than one form item, you get ?myname=val1&myname=val2&myname=val3 in the request url, that usually gets converted in an array(val1, val2, val3). – redShadow Commented Mar 2, 2011 at 13:45
• I agree with both ThiefMaster and redShadow. You're making it very difficult for yourself having the same name for the 2 selects... – FarligOpptreden Commented Mar 2, 2011 at 13:45
• @redShadow: I know. But then you usually do not use the same values, too. – ThiefMaster Commented Mar 2, 2011 at 13:48

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 4

I'm not sure how you're selecting the elements, so I'll give them an ID for simplicity.

Example: http://jsfiddle/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... -->

---

EDIT: Changed to deal with browsers that don't support .disabled. Credit to @Zoidberg.

Ultimately, if you can afford the real-estate i would use Radio buttons instead, or checkboxes and only allow them to select 2 check boxes at the most. To me drop downs don't work in this situation

However, if you don't have the real-estate and you must use dropdowns, then your best bet, is once they have selected a value in the first drop down, disable or remove it in the second dropdown, and vice versa (incase they select a value in the first one). I would remend disabling as opposed to removing, as it will be more apparent to the user what is going on.

<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>

Then the js that goes with it

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;
}

The only problem is, IE 7 and earlier doesn't support disabled. If this is a deal breaker than you will have to go with removing the option from the Other Select, and then replace it later. Only issue with this is that it will change the order of options, unless you refresh the whole list. To refresh the whole list, you will need to store the options and values in an array (kinda like a model) that never changes and is used to update the selects when the change event occurs.

try this, add id="indication_subject1" in select 1. and id="indication_subject2" in select 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);
    }
});

本文标签： javascriptnot allow select same value with two dropdownStack Overflow