Jquery Disable Selected Value in All Dropdown with Same Values

Question

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

Have you debugged already? Check what the selected variable is with console.log(). Also, your $('.item_id').each loop doesn't has any sense since the code in the loop isn't affected by the loop and you can put it outside the loop. — Anton
– Anton, Commented Nov 2, 2014 at 14:15
if i select a value in first drop down it shows the selected value in console, if i select the value in second drop down, it again shows the value of first drop down----------- I used each function to loop over all the .item_id class and add disabled attribute in options — musthafa
– musthafa, Commented Nov 2, 2014 at 14:18
"I used each function to loop over all the .item_id class and add disabled attribute in options" This is all true, but the loop still doesn't has any sense. You are changing the option to disabled in the loop, but you're not changing the option of the item in the loop to disabled, so the loop isn't necessary. You could do something like $(this).find('option') in the loop what would make the loop useful. — Anton
– Anton, Commented Nov 2, 2014 at 14:21
change the line : var selected=$('.item_id option:selected').val(); to var selected=$(this).val(); — vrajesh
– vrajesh, Commented Nov 2, 2014 at 14:54

vrajesh · Accepted Answer · 2014-11-02 17:44:14Z

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>

Collectives™ on Stack Overflow

Jquery Disable Selected Value in All Dropdown with Same Values

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related