How to remove selected drop down value in HTML using Java script?

Question

I have a multiple dropdown item, when i selected a item from a drop down, that item shouldn't show to another drop down.

For an example

drop downs

drop town items are "10 20 30"

initially ,

1st Dropdown contain "10, 20, 30"

2nd Dropdown contain "10, 20, 30"

3rd Dropdown contain "10, 20, 30"

When i choose 30 from 2nd drop down and 1st and 3rd drop down shouldn't show "30" to both.

I hope someone will help soon, Thanks in Advance Below the code i tried

    <script type="text/javascript">

$(document).ready(function () {

    var hideOptions = function () {             
        var $select =  $('select');
        $select.find('option').show();
        $select.each(function () {
            var $this = $(this);
            var value = $this.val();
            var $options = $this.siblings('select').find('option');
            var $option = $options.filter('[value="' + value + '"]');
            if (value) {
                $option.hide();
                $option.each(function () {
                    if (this.defaultSelected) {
                        $(this).parent('select').val('');
                    }
                });
            }
        });
    }

    hideOptions();

    $('select').on('change', function () {  

        hideOptions();
    });
});
</script>



<table style="width:40%" class="requiredField">
<tbody><tr><th>File header</th><th>Table Column</th></tr>

<tr><td>EMAIL</td><td><select name="EMAIL">
<option value="">Select</option>
<option value="Email_Address">Email_Address</option>
<option value="Salutation">Salutation</option>
<option value="First_Name">First_Name</option>
<option value="Last_Name">Last_Name</option>
<option value="Gender">Gender</option>
<option value="Company">Company</option>
<option value="Country">Country</option></td></tr>

<tr><td>Salutation</td><td><select name="Salutation">
<option value="">Select</option>
<option value="Email_Address">Email_Address</option>
<option value="Salutation">Salutation</option>
<option value="First_Name">First_Name</option>
<option value="Last_Name">Last_Name</option>
<option value="Gender">Gender</option>
<option value="Company">Company</option>
</td>
</tr>
</tbody></table>

Answer 1

$(document).ready(function() {
    $('.drop').on('change', 'select', function() {
    // For all `select` inside `.drop`

        $(this).siblings('select').find('option[value="' + $(this).val() + '"]').remove();

        // Get other `select` and remove the selected option from other select
    });
});

Demo: http://jsfiddle.net/tusharj/2wopf23v/1/

Answer 2

Try this

<script `src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>`

<script type="text/javascript"> $(document).ready(function() {
    $('.team1').live('change', function() {
    var allteam = $('.team1').html();
    var val = $(this).val();
    $('.team1[id!="' + $(this).attr("id") + '"]').each(function() {
        $(this).find('option[value="' + val + '"]').remove();
    }); 
    //alert("allteam " + allteam);
}); 
</script> 
<div class="drop">
Team:1
<select data-placeholder="Select Team 1" class="chzn-select team1 drop" tabindex="6" name="team1[]" id="team_one">
    <option value="">Select</option>
    <option value="Team one">Team one</option>
    <option value="Team two">Team two</option>
    <option value="Team three">Team three</option>
</select>
Team:2
<select data-placeholder="Select Team 2" class="chzn-select team1 drop" tabindex="6" name="team1[]"  id="team_two">
    <option value="">Select </option>
    <option value="Team one">Team one</option>
    <option value="Team two">Team two</option>
    <option value="Team three" selected>Team three</option>
</select>
Team:3
<select data-placeholder="Select Team 2" class="chzn-select team1" tabindex="6" name="team1[]"  id="team_three">
    <option value="">Select </option>
    <option value="Team one" selected>Team one</option>
    <option value="Team two">Team two</option>
    <option value="Team three">Team three</option>
</select>

Answer 3

  $(document).ready(function() { $('.team1').change(function() { var allteam = $('.team1').val(); item2(allteam); }); function item2(all1) { $name = all1; $(".team2 option").each(function() { if(this.value == $name){ $(this).hide(); } }); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <div class="drop"> Team:1 <select data-placeholder="Select Team 1" class="chzn-select team1 drop" tabindex="6" name="team1[]"> <option value="">Select</option> <option value="Team one">Team one</option> <option value="Team two">Team two</option> <option value="Team three">Team three</option> </select> Team:2 <select data-placeholder="Select Team 2" class="chzn-select team2 drop" tabindex="6" name="team1[]"> <option value="">Select</option> <option value="Team one">Team one</option> <option value="Team two">Team two</option> <option value="Team three" selected>Team three</option> </select> Team:3 <select data-placeholder="Select Team 2" class="chzn-select team3" tabindex="6" name="team1[]"> <option value="">Select</option> <option value="Team one" selected>Team one</option> <option value="Team two">Team two</option> <option value="Team three">Team three</option> </select> </div> 

you can do this way to another third one

Answer 4

Here is a way to regain the removed (in this case, the hidden) options when they get unselected:

$(document).ready(function () {

    var hideOptions = function () {
        var $select =  $('select');
        $select.find('option').show();
        $select.each(function () {
            var $this = $(this);
            var value = $this.val();
            var $options = $this.siblings('select').find('option');
            var $option = $options.filter('[value="' + value + '"]');
            if (value) {
                $option.hide();
                $option.each(function () {
                    if (this.defaultSelected) {
                        $(this).parent('select').val('');
                    }
                });
            }
        });
    }

    hideOptions();

    $('select').on('change', function () {
        hideOptions();
    });
});

Demo

Update:

With the provide HTML-Markup you have to change the the line which set the varibale $options to:

var $options = $this.parents('table').find('select').not(this).find('option');

Demo 2

Answer 5

This is a jquery code I made which does exactly this. Also leaves empty values in (if you have "Please select" in the top) and reinserts unselected values. It does it for all select elements on the page, if you need to restrict replace the selector $("select") with a more specific one:

$( document ).ready(function() {
  manageSelectValues();
  $("select").change(manageSelectValues); 
});

function manageSelectValues()
{
  $("select").each(function() {
      var id = $(this).attr('id');
    var value = $(this).find(":selected").val();
    if (value) {
      $("select[id!='" + id + "']").find("option").filter(function() { return this.value == value;}).remove();
    }
    $(this).find("option").filter(function() { return this.value != value;}).each(function() {
      var unselValue = $(this).val();
      $("select").filter(function() { return $(this).find("option").filter(function() { return this.value == unselValue;}).length == 0; }).append(
        $('<option></option>').val(unselValue).html(unselValue));
    })
  });
}

Answer 6

I managed to get your code running by removing selected from your table. so the code looks like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">   </script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {

var hideOptions = function () {
    var $select = $('select');
    $select.find('option').show();
    $select.each(function () {
        var $this = $(this);
        var value = $this.val();
        var $options = $this.parents('table').find('select').not(this).find('option');
        var $option = $options.filter('[value="' + value + '"]');
        if (value) {
            $option.hide();
            $option.each(function () {
                if (this.defaultSelected) {
                    $(this).parent('select').val('');
                }
            });
        }
    });
};

hideOptions();

$('select').on('change', function () {
    hideOptions();
});
});
</script> 

<table style="width:40%" class="requiredField">
<tbody>
    <tr>
        <th>Header</th>
        <th>Mapping</th>
    </tr>
    <tr>
        <td>dropdownA</td>
        <td>
            <select name="email">
                <option value="">Select</option>
                <option value="Email_Address">Email_Address</option>
                <option value="Salutation">Salutation</option>
                <option value="First_Name">First_Name</option>
                <option value="Last_Name">Last_Name</option>
                <option value="Gender">Gender</option>
                <option value="Company">Company</option>                    
            </select>
        </td>
    </tr>
    <tr>
        <td>dropdownB</td>
        <td>
            <select name="Salutation">
                <option value="">Select</option>
                <option value="Email_Address">Email_Address</option>
                <option value="Salutation">Salutation</option>
                <option value="First_Name">First_Name</option>
                <option value="Last_Name">Last_Name</option>
                <option value="Gender">Gender</option>
                <option value="Company">Company</option>
            </select>
        </td>
    </tr>       
     <tr>
        <td>dropdownC</td>
        <td>
            <select name="First_Name">
                <option value="">Select</option>
                <option value="Email_Address">Email_Address</option>
                <option value="Salutation">Salutation</option>
                <option value="First_Name">First_Name</option>
                <option value="Last_Name">Last_Name</option>
                <option value="Gender">Gender</option>
                <option value="Company">Company</option>
            </select>
        </td>
    </tr>
     <tr>
        <td>dropdownD</td>
        <td>
            <select name="Last_Name">
                <option value="">Select</option>
                <option value="Email_Address">Email_Address</option>
                <option value="Salutation">Salutation</option>
                <option value="First_Name">First_Name</option>
                <option value="Last_Name">Last_Name</option>
                <option value="Gender">Gender</option>
                <option value="Company">Company</option>
            </select>
        </td>
    </tr>




</tbody>