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 }); });
Comments
Post a Comment