CODEWITHSUNDEEP
javascriptphpjqueryhtml
musthafa
musthafa

Reputation: 433

Jquery Disable Selected Value in All Dropdown with Same Values

Here is my Php code

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

I will echo this $menuOptions string to display select box with same values , i am having more than 10 select boxes in same page with same values

if i selected a value in one dropdown, the value should disabled in all 10 select boxes in that page

Here is the code which i tried but seems to be not fetching the value from second select box, it is fetching only the first select box selected value as because of class name is same,

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

is there any way to disabled in jquery after it gets selected

Upvotes: 1

Views: 2834

Answers (1)

vrajesh
vrajesh

Reputation: 2942

here is your answer:demo

$(".item_id").on('focus', function ()
		{
		// Store the current value on focus and on change
		previous = this.value;
		}).change(function() {
		// Do something with the previous value after the 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'); 
	  });
		// Make sure the previous value is updated
		previous = this.value;
		});
<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 a 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 a 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 a 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 a 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>

Upvotes: 3

Related Questions