Changing one selection changes many others (JavaScript, JQuery)
I have many dropdowns in a jsp page with a long list of items. All of these dropdowns have the same list of items. Let's say I have to get a selection in descending order of preference from the user. I made (many) picks like this:
<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 need to create my javascript / JQuery code such that if the user selects an option, selects first, that option is disabled / removed in others, leaving room for changes later. Let's say a custom preference order: Chinese, Indian, Italian ... then when selecting Chinese in the first dropdown it is disabled / removed from other dropdowns. Then, choosing India from the second, it is disabled / removed from all others (including the previous one). Now, if the user decides that his order of preference is actually Chinese, Italian, Indian, he should be able to change his choice so that the code doesn't break. Let's say we can have a button to reset and it resets all options 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 do this? I need the code to be browser independent (while googling, I read somewhere that IE does not support removing items from the dropdown).
EDIT: Here's what I basically want:
However, there is a problem with this. If the user keeps changing their choice, this thing breaks. I can choose several options.
source to share
$('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);
}
});
If I were to select Football, Golf, Tennis, I would need to select No Preference in the third field before I can select it in one of the other boxes. I think this is acceptable from a UX perspective.
source to share
Since you tagged this jQuery my example below will use this:
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" />
source to share
This may not be the most efficient solution, but you should try if there is nothing better: when you change the selection, let all the others go, and then fill in all the other parameters.
let's say you have 3 choices: sel1, sel2, sel3 in the onchange event you can call the "fill_other_sel (number)" function, where number is the number of the current selector.
This function should remove the current parameters and then populate the check with the previous selectors so that you don't populate the 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 can add a parameter to your fill function showing which values have already been selected so that they do not appear again
source to share