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:

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

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

Thanks for your help!

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!

• javascript
• jquery
• html
• drop-down-menu

• You can't hide <option> tag , it doesn't work cross browser. Choices are disable or remove – charlietfl Commented Aug 6, 2015 at 15:45
• Is there any way I could hide just the Text (The whole line, so it doesn't appear as a blank line in the dropdown) – cfly24 Commented Aug 6, 2015 at 15:46
• Disable/enable is your best best since hide doesn't work on all browsers! – lshettyl Commented Aug 6, 2015 at 15:49
• not hard to store all options and filter them so they are removed/added. Hiding text won't prevent that option being selected – charlietfl Commented Aug 6, 2015 at 15:53

6 Answers 6

As said in ments, 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./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

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

You should use this plugin http://gregfranko./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.

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

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

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