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

时间:2014-11-02 13:48:47

标签: javascript php jquery html

这是我的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被选中后被禁用

1 个答案:

答案 0 :(得分:3)

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