从菜单一中选择应该禁用菜单二中的相同值

Question

我有两个选择框值，Sales Manager 1和SalesManager 2。我需要在Sales Manager 2中隐藏销售经理1的选定选项值。这两个选项都从数据库中获取值。我该如何实现它？

查看文件：

<div class="form-group">
<label for="sales">Sales Manager 1</label>
<select name="erp_customer[manager_id]" id="manager_id" class="form-control select2" data-validation="required" data-validation-error-msg="Sales Manager is required" placeholder="Select Manager">
<option value="">Select Sales Manager</option>
<?php
foreach ($sale_manager as $mg) { ?>
<option value="<?php echo $mg->manager_id; ?>" <?php echo (!empty($customer) && $customer->manager_id == $mg->manager_id) ? 'selected' : ''; ?>><?php echo ucfirst(mb_strtolower($mg->sale_fname)); ?></option>
<?php } ?>
</select>
</div>
<div class="form-group">
<label for="sales">Sales Manager 2</label>
<select name="erp_customer[manager_id1]" id="manager_id2" class="form-control select2" data-validation="required" data-validation-error-msg="Sales Manager is required" placeholder="Select Manager">
<option value="">Select Sales Manager</option>
<?php
foreach ($sale_manager as $mg) { ?>
<option value="<?php echo $mg->manager_id; ?>" <?php echo (!empty($customer) && $customer->manager_id1 == $mg->manager_id) ? 'selected' : ''; ?>><?php echo ucfirst(mb_strtolower($mg->sale_fname)); ?></option>
<?php } ?>
</select>
</div>

选项值将类似于1、2、3、4。我从1="Ram"2="ragu"所在的另一个表中获得了名称，所以当选项值1被选中时，我如何在销售经理2中隐藏它。我试过这个代码，但只对第一次选择有帮助。一旦我再次尝试选择，只有第一次选择的值被禁用。

$('.form-control[id=manager_id]').on('change', function(e){
var thisVal = $(this).val();
$('.form-control[id=manager_id2] option').each(function(){
if(thisVal == $(this).attr('value')){
$(this).attr('disabled', 'disabled');
} else {
$(this).removeAttr('disabled');
}
})
})

我的控制器：

public function addcustomer(){
$data["title"] = "Add New Customer";
$data["sale_manager"] = $this->customer_model->getsales_managerlist();
load_default_template('customer/addnew',$data,$this);
echo $this->template->render("", true);
}

我的型号：

public function getsales_managerlist(){
$this->db->select("*")->from('erp_manager')->where("status", 1);
$query = $this->db->get();
return $query->result();
}

Answer 1

我认为您真的不需要在循环中执行else来禁用。只需在默认情况下删除它，然后在值匹配时再次设置它。以下是以下脚本的演示：https://jsfiddle.net/wf82Lc3j/

$(function(){
$(this).on('change', '.form-control[id=manager_id]', function(e){
// Get current value
var thisVal =   $(this).val();
// Get the second select obj
var thatObj =   $('.form-control[id=manager_id2]');
// Loop options
$.each(thatObj.children(), function(k,v){
// Just remove disabled right off the start
$(v).attr('disabled', false);
// If value equals current
if($(v).attr('value') == thisVal) {
// If not on the default select option
if(thisVal != '') {
// Disable the option
$(v).attr('disabled', true);
// If the user has already select this item before selecting from the first menu
if($(v).is(":selected")) {
// Reset the selection to default
thatObj.val('');
}
}
}
}); 
});
});