javascript - Jquery 在所有具有相同值的下拉列表中禁用选定值

Question

这是我的 Php 代码

<?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>';
 ?>

我将回显此 $menuOptions 字符串以显示具有相同值的选择框，我在同一页面中有超过 10 个具有相同值的选择框

如果我在一个下拉列表中选择了一个值，该值应该在该页面的所有 10 个选择框中禁用

这是我试过但似乎没有从第二个选择框获取值的代码，它只获取第一个选择框选择的值，因为类名相同，

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

有没有办法在jquery被选中后禁用它

Answer 1

这是您的答案: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>