更改一个选择选项会更改许多其他选项（JavaScript，JQuery）

Question

I have a lot of select drop downs on a jsp page with a long list of elements. All of these drop downs have the same list of elements. Say I have to get the choice in descending order of preference from the user. I made (many) selects in the following way:

<select id="sel1" class="myClass">
        <script>
         populate(document.getElementById('sel1'));
        </script>
  </select>

...

<script>
function populate(op1)
{

    var myArray = ["Chinese", "Italian", "Indian", ...//a long list of elements
        var sel = op1;
        for(var i = 0; i < myArray.length; i++) {
            var opt = document.createElement('option');
            opt.innerHTML = myArray[i];
            opt.value = myArray[i];
            sel.appendChild(opt);
        }
}
</script>

I have to create javascript/JQuery code in such a way that if a user selects an option the first select, that option gets disabled/removed in the others, leaving room for changes later. Say, the user's preference order is: Chinese, Indian, Italian... then on selecting Chinese in the first drop down, it gets disabled/removed from the other drop downs. Then, on selecting Indian from the second, it gets disabled/removed from all the others (including the previous one). Now, if the user decides his order of preference is actually Chinese, Italian, Indian, .. he should be able to change his choice in such a way that the code doesn't break down. Say, we can have a button for reset and it resets all the choices by calling this function:

function resetFunc()
{
    var options = document.getElementsByClassName("myClass");
        for (var i = 0, l = options.length; i < l; i++) 
        {
            options[i].selectedIndex = "0";
        }
}

Any idea how to accomplish this? I need the code to be browser independent (while googling, I read somewhere that IE doesn't support removal of elements from drop down).

EDIT: Here's what I basically want:

http://jsfiddle.net/RaBuQ/1/

However, there's a problem in this. If a user keeps changing his choices, this thing breaks down. I'm able to select multiple choices.

Answer 1

$('select').change(function(){
    var v = $(this).val();
    $('select option[value="'+$(this).data('old-val')+'"]').prop('disabled', false);
    $(this).data('old-val',v);
    if(v != "0"){
        $('select option[value="'+v+'"]').not(this).prop('disabled',true);
    }
});

Here's a fiddle.

If I selected 'Football', 'Golf', 'Tennis', I'd need to select 'No preference' in the third box before I could then select it in one of the other boxes. I think this is acceptable from a UX perspective.

Answer 2

Since you've tagged this jQuery my example below will utilize that:

 function populate() { var myArray = ["Chinese", "Italian", "Indian"]; $('.myClass').each(function() { var dis = $(this); dis.append($("<option>").attr("value", "").text("select")); $.each(myArray, function(i, o) { dis.append($("<option>").attr("value", o).text(o)); }); }); } function init() { $('.myClass').html('').prop('disabled', false); populate(); } $(document).on('change', '.myClass', function() { $('.myClass option[value="' + $(this).val() + '"]:not(:checked)').remove(); $(this).prop('disabled', true); }); $('#reset').click(init); init(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select id="sel1" class="myClass"></select> <select id="sel2" class="myClass"></select> <select id="sel3" class="myClass"></select> <input type="button" id="reset" value="Reset options" /> 

Answer 3

The following might not be the most efficient solution, but you should try it if there is nothing better: when you change a select, empty all other selects and then fill them with all the other options.

lets say you have 3 selects: sel1, sel2, sel3 in the onchange event, you could call a function "fill_other_sel(number)" where number is the number of the current selector.

This function should delete current options and then populate checking with the previous selectors so that you dont populate with a previously selected value.

function fill_other_sel(number){
   var num_selectors = 3;
   while (number <= num_selectors){
      number++;
      $('#sel'+number).options.length=1;
      populate('sel'+number, already_selected_values_array);
   }

}

also you might add a parameter to your populate function showing which values have already been selected to prevent them from appearing again