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


i have multiple dropdown item, when selected item drop down, item shouldn't show drop down.

for example

drop downs

drop town items "10 20 30"

initially ,

1st dropdown contain "10, 20, 30"

2nd dropdown contain "10, 20, 30"

3rd dropdown contain "10, 20, 30"

when choose 30 2nd drop down , 1st , 3rd drop down shouldn't show "30" both.

i hope soon, in advance below code 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> 

$(document).ready(function() {     $('.drop').on('change', 'select', function() {     // `select` inside `.drop`          $(this).siblings('select').find('option[value="' + $(this).val() + '"]').remove();          // other `select` , remove selected option other select     }); }); 

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


Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -