javascript - Jquery Disable Selected Value in All Dropdown with Same Values -

javascript - Jquery Disable Selected Value in All Dropdown with Same Values -

here php code

<?php $menu_items = $this->db->get('menu_items'); $menuoptions ='<select class="item_id" name="item_id[]">'; $menuoptions .='<option value="">-- select menu item --</option>'; foreach ($menu_items->result() $row) { $menuoptions.= '<option value="'.$row->code.'">'.$row->name.'</option>'; } $menuoptions.='</select>'; ?>

i echo $menuoptions string display select box same values , having more 10 select boxes in same page same values

if selected value in 1 dropdown, value should disabled in 10 select boxes in page

here code tried seems not fetching value sec select box, fetching first select box selected value because of class name same,

$(".item_id").change(function () { var selected=$('.item_id option:selected').val(); $('.item_id').each(function() { $('option[value="' + selected + '"]').attr('disabled','disabled'); }); });

is there way disabled in jquery after gets selected

here answer:demo

class="snippet-code-js lang-js prettyprint-override">$(".item_id").on('focus', function () { // store current value on focus , on alter previous = this.value; }).change(function() { // previous value after change //alert(previous); var previoues_val=previous;//alert(p); var selected=$(this).val(); var opts = $(this)[0].options; var array = $.map(opts, function(elem) { return (elem.value || elem.text); }); //alert(array); $('.item_id').each(function() { var v=$(this).val(); if(previoues_val != '' ) { //alert(p); $('option[value="' + previoues_val + '"]').removeattr('disabled'); } $('option[value="' + selected + '"]').attr('disabled','disabled'); $('option[value=""]').removeattr('disabled'); }); // create sure previous value updated previous = this.value; }); class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <select class="item_id" name="item_id[]"><option value="">-- select menu item --</option><option value="0">value0</option><option value="1">value1</option><option value="2">value2</option><option value="3">value3</option><option value="4">value4</option><option value="5">value5</option><option value="6">value6</option><option value="7">value7</option><option value="8">value8</option><option value="9">value9</option></select><select class="item_id" name="item_id[]"><option value="">-- select menu item --</option><option value="0">value0</option><option value="1">value1</option><option value="2">value2</option><option value="3">value3</option><option value="4">value4</option><option value="5">value5</option><option value="6">value6</option><option value="7">value7</option><option value="8">value8</option><option value="9">value9</option></select><select class="item_id" name="item_id[]"><option value="">-- select menu item --</option><option value="0">value0</option><option value="1">value1</option><option value="2">value2</option><option value="3">value3</option><option value="4">value4</option><option value="5">value5</option><option value="6">value6</option><option value="7">value7</option><option value="8">value8</option><option value="9">value9</option></select><select class="item_id" name="item_id[]"><option value="">-- select menu item --</option><option value="0">value0</option><option value="1">value1</option><option value="2">value2</option><option value="3">value3</option><option value="4">value4</option><option value="5">value5</option><option value="6">value6</option><option value="7">value7</option><option value="8">value8</option><option value="9">value9</option></select>

javascript php jquery html