Dropdown values filter based on another dropdown javascript

Question

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

Can you explain this line But if other values are selected from the list. the previously selected values will show in the rest of the dropdown lists.? — void
– void, Commented Nov 13, 2015 at 14:58
yeah actually we dynamically select values from dropdown list. so it always get modified. this is what i mentioned. — htoniv
– htoniv, Commented Nov 13, 2015 at 15:01
here i used jquery.but i need the answer either in javascript or jquery. — htoniv
– htoniv, Commented Nov 13, 2015 at 15:09

Mohamed-Yousef · Accepted Answer · 2015-11-13 15:08:17Z

1

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

DEMO

Note: if this works with you .. just tell me to explain it better

answered Nov 13, 2015 at 15:08

Mohamed-Yousef

24k3 gold badges21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

htoniv Over a year ago

in ur demo if i select value 'two' from '#dropdownone' the value should not show for the rest of the two dropdown elements.

L Ja · Accepted Answer · 2015-11-13 15:18:59Z

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

Collectives™ on Stack Overflow

Dropdown values filter based on another dropdown javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related