在下拉菜单1中选中后，从下拉菜单2中隐藏选项

Question

I have two dropdowns, both have the same items in them. If an option is selected in dropdown 1 then I would like to hide that option in dropdown 2. When it is unselected in dropdown 1 I would like it to appear again in dropdown 2 and whichever option is then selected to then be hidden in dropdown 2. I am trying to have this exclude the blank option in the first index.

Here is a codepen that I started, but I am not sure where to go from here:

http://codepen.io/cavanflynn/pen/EjreJK

    var $dropdown1 = $("select[name='dropdown1']");
    var $dropdown2 = $("select[name='dropdown2']");

    $dropdown1.change(function () {
        var selectedItem = $($dropdown1).find("option:selected").val;
});

Thanks for your help!

Answer 1

As said in comments, one of the options is to disable/enable options according to the selection in the first select, like below. This would work on all browsers as opposed to hide/show which doesn't.

 var $dropdown1 = $("select[name='dropdown1']"); var $dropdown2 = $("select[name='dropdown2']"); $dropdown1.change(function() { $dropdown2.find('option').prop("disabled", false); var selectedItem = $(this).val(); if (selectedItem) { $dropdown2.find('option[value="' + selectedItem + '"]').prop("disabled", true); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="dropdown1"> <option></option> <option value="1">Test 1</option> <option value="2">Test 2</option> <option value="3">Test 3</option> </select> <select name="dropdown2"> <option></option> <option value="1">Test 1</option> <option value="2">Test 2</option> <option value="3">Test 3</option> </select> 

Another option is to remove/add options in the 2nd dropdown based on the selection in the first via .clone() , as below.

var $dropdown1 = $("select[name='dropdown1']");
var $dropdown2 = $("select[name='dropdown2']");

$dropdown1.change(function() {
    $dropdown2.empty().append($dropdown1.find('option').clone());
    var selectedItem = $(this).val();
    if (selectedItem) {
        $dropdown2.find('option[value="' + selectedItem + '"]').remove();
    }
});

A Demo

Answer 2

You should use this plugin http://gregfranko.com/jquery.selectBoxIt.js

It has some really nice callbacks and customisation options.

When one changes you can put it in the callback to update the other.

Answer 3

Here is one way of doing it. You do need to include jQuery, and then as long as the value isn't empty hide the option with the similar value.

 var $dropdown1 = $("select[name='dropdown1']"); var $dropdown2 = $("select[name='dropdown2']"); $dropdown1.change(function() { $dropdown2.children().show(); var selectedItem = $($dropdown1).val(); if (selectedItem != "") $('select[name="dropdown2"] option[value="' + selectedItem + '"]').hide(); }); $dropdown2.change(function() { $dropdown1.children().show(); var selectedItem = $($dropdown2).val(); if (selectedItem != "") $('select[name="dropdown1"] option[value="' + selectedItem + '"]').hide(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="dropdown1"> <option></option> <option value="1">Test 1</option> <option value="2">Test 2</option> <option value="3">Test 3</option> </select> <select name="dropdown2"> <option></option> <option value="1">Test 1</option> <option value="2">Test 2</option> <option value="3">Test 3</option> </select> 

Answer 4

Here's an approach that stores a set of the options on page load then filters the alternate select when a change is made. It works in both directions for changes made to either select

var $drops = $('.drop'),
// store a set of options
$options = $drops.eq(1).children().clone();

$drops.change(function(){
    var $other = $drops.not(this),
        otherVal = $other.val(),
        newVal = $(this).val(),
        $opts = $options.clone().filter(function(){
           return this.value !== newVal; 
        })
     $other.html($opts).val(otherVal);    
});

Values will also be maintained and this is 2 directional so a change in either will filter the other

DEMO

Answer 5

 var $dropdown1 = $("select[name='dropdown1']"); var $dropdown2 = $("select[name='dropdown2']"); $dropdown1.change(function() { var selectedItem = $(this).val(); var $options = $("select[name='dropdown1'] > option").clone(); $("select[name='dropdown2']").html($options); $("select[name='dropdown2'] > option[value="+selectedItem+"]").remove(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <select name="dropdown1"> <option></option> <option value="1">Test 1</option> <option value="2">Test 2</option> <option value="3">Test 3</option> </select> <select name="dropdown2"> <option></option> <option value="1">Test 1</option> <option value="2">Test 2</option> <option value="3">Test 3</option> </select> 

Demo

Answer 6

Well, this code will find option by value in necessary selects and remove it.

http://codepen.io/anon/pen/LVqgbO

 var $dropdown1 = $("select[name='dropdown1']"); var $dropdown2 = $("select[name='dropdown2']"); var populateDropdown = function(element) { element.find("option").remove(); element.append("<option></option>"); // There should be real data for (var i = 1; i <= 3; i++) { element.append("<option value='" + i + "'>Test " + i + "</option>"); } } var getOptionProps = function(element) { var selectedValue = element.val(); var selectedText = element.find("option[value=" + selectedValue + "]").text(); return { text: selectedText, value: selectedValue }; } var removeOptionWithValue = function(element, value) { element.find("option[value='" + value + "']").remove(); } $dropdown1.on("change", function () { var selectedProps = getOptionProps($(this)); populateDropdown($dropdown2); removeOptionWithValue($dropdown2, selectedProps.value); }); $dropdown2.on("change", function () { var selectedProps = getOptionProps($(this)); populateDropdown($dropdown1); removeOptionWithValue($dropdown1, selectedProps.value); });