CODEWITHSUNDEEP
javascriptjqueryhtmldrop-down-menu
cfly24
cfly24

Reputation: 1962

Hide option from dropdown 2 when selected in dropdown 1

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!

Upvotes: 1

Views: 17107

Answers (6)

Andrew Orlov
Andrew Orlov

Reputation: 512

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

Upvotes: 0

shafiq.rst
shafiq.rst

Reputation: 1296

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

Upvotes: 1

charlietfl
charlietfl

Reputation: 171690

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

Upvotes: 0

lshettyl
lshettyl

Reputation: 8181

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

Upvotes: 3

depperm
depperm

Reputation: 10756

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>

Upvotes: 0

Bruffstar
Bruffstar

Reputation: 1289

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.

Upvotes: 0

Related Questions