Here i have three dropdown lists each contains same number of values.So the question is If value 'one' is selected from '#dropdownone'. it should not show value 'one' for the rest of the two dropdown menus. Also if some value is selected from '#dropdowntwo' it should not show the values in the dropdown for the other two elements list. same case for the '#dropdownthree'. But if other values are selected from the list. the previously selected values will show in the rest of the dropdown lists.
FIDDLE
HTML
<select id='dropdownone'></select>
<select id='dropdowntwo'></select>
<select id='dropdownthree'></select>
Javascript
var numbers = ['one', 'two', 'three', 'four', 'five'];
$.each(numbers, function( key, value ) {
if (key == 0) {
$("#dropdownone").append("<option selected='selected' value='"+key+"'>"+value+"</option>");
$("#dropdowntwo").append("<option value='"+key+"'>"+value+"</option>");
$("#dropdownthree").append("<option value='"+key+"'>"+value+"</option>");
} else if (key == 1) {
$("#dropdownone").append("<option value='"+key+"'>"+value+"</option>");
$("#dropdownthree").append("<option value='"+key+"'>"+value+"</option>");
$("#dropdowntwo").append("<option selected='selected' value='"+key+"'>"+value+"</option>");
} else if (key == 2) {
$("#dropdownone").append("<option value='"+key+"'>"+value+"</option>");
$("#dropdowntwo").append("<option value='"+key+"'>"+value+"</option>");
$("#dropdownthree").append("<option selected='selected' value='"+key+"'>"+value+"</option>");
} else {
$("#dropdownone").append("<option value='"+key+"'>"+value+"</option>");
$("#dropdowntwo").append("<option value='"+key+"'>"+value+"</option>");
$("#dropdownthree").append("<option value='"+key+"'>"+value+"</option>");
}
});
Note: I need the function works in onchange event
for example
first time value selection if value 'one' is selected from '#dropdownone' it should not show the one
value in '#dropdowntwo' & '#dropdownthree'.
second time value selection if value 'two' is selected from '#dropdownone' it should not show the value two
in '#dropdowntwo' & '#dropdownthree'. but the prevoiusly selected value 'one' should show for the two dropdown elements
third time value selection if again value 'one' is selected from '#dropdownone' it should not show the value in '#dropdowntwo' & '#dropdownthree'.
you can use something like this and repeat the change function for every dropdown you need
var numbers = ['one', 'two', 'three', 'four', 'five'];
var htmlAppend;
$.each(numbers, function( key, value ) {
htmlAppend += '<option value="'+key+'">'+value+'</option>';
});
$("#dropdownone, #dropdowntwo, #dropdownthree").html(htmlAppend);
$('#dropdownone').on('change',function(){
var thisKey = $(this).val();
$("#dropdowntwo").html(htmlAppend);
$("#dropdowntwo > option[value='"+ thisKey +"']").remove();
});
Note: if this works with you .. just tell me to explain it better
Edit: @Mohamed-Yousef's answer is way better, go with his instead.
I am assuming you mean this?
DEMO <- UPDATED TO HIDE
HTML
<select class="select" id='dropdownone'></select>
<select class="select" id='dropdowntwo'></select>
<select class="select" id='dropdownthree'></select>
JS
console.clear(); // easy debugging
var chosen = {1: "one", 2: "two", 3: "three"};
$(".select").change(function(){
var index = $(this).index() + 1;
var value = $(this).val();
var other = {};
if(index === 1) { other = ["dropdowntwo", "dropdownthree"]; }
if(index === 2) { other = ["dropdownone", "dropdownthree"]; }
if(index === 3) { other = ["dropdownone", "dropdowntwo"]; }
$.each(other, function(index, val){
$(".select[id="+val+"] option").each(function(){
if($(this).val() == value) {
$(this).hide(); // <----- CHANGE THIS
}
});
});
});
var numbers = ['one', 'two', 'three', 'four', 'five'];
$.each(numbers, function( key, value ) {
if (key == 0) {
$("#dropdownone").append("<option selected='selected' value='"+value+"'>"+value+"</option>");
$("#dropdowntwo").append("<option value='"+value+"'>"+value+"</option>");
$("#dropdownthree").append("<option value='"+value+"'>"+value+"</option>");
} else if (key == 1) {
$("#dropdownone").append("<option value='"+value+"'>"+value+"</option>");
$("#dropdownthree").append("<option value='"+value+"'>"+value+"</option>");
$("#dropdowntwo").append("<option selected='selected' value='"+value+"'>"+value+"</option>");
} else if (key == 2) {
$("#dropdownone").append("<option value='"+value+"'>"+value+"</option>");
$("#dropdowntwo").append("<option value='"+value+"'>"+value+"</option>");
$("#dropdownthree").append("<option selected='selected' value='"+value+"'>"+value+"</option>");
} else {
$("#dropdownone").append("<option value='"+value+"'>"+value+"</option>");
$("#dropdowntwo").append("<option value='"+value+"'>"+value+"</option>");
$("#dropdownthree").append("<option value='"+value+"'>"+value+"</option>");
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.