Javascript 基于另一个下拉列表禁用下拉列表中的多个值_Javascript_Jquery

Javascript 基于另一个下拉列表禁用下拉列表中的多个值

javascript jquery

Javascript 基于另一个下拉列表禁用下拉列表中的多个值,javascript,jquery,Javascript,Jquery,我想根据第一个下拉列表中的选定值禁用第二个和第三个下拉列表中的多个值。我可以对单个选定值执行此操作。但是，如何对多个选定值执行此操作我有3个下拉列表，都是多选下拉列表。我的密码是 <!DOCTYPE html> <html> <head> <script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script> <link rel=

我想根据第一个下拉列表中的选定值禁用第二个和第三个下拉列表中的多个值。我可以对单个选定值执行此操作。但是，如何对多个选定值执行此操作

我有3个下拉列表，都是多选下拉列表。我的密码是

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  <script type="text/javascript">
    $(window).load(function(){
        var $dropdown1 = $("select[name='project_manager[]']");
        var $dropdown2 = $("select[name='test_engineer[]']");
        var $dropdown3 = $("select[name='viewer[]']");

        $dropdown1.change(function() {
            $dropdown2.empty().append($dropdown1.find('option').clone());
            $dropdown3.empty().append($dropdown2.find('option').clone());
            var selectedItem = $(this).val();
            if (selectedItem) {
                $dropdown2.find('option[value="' + selectedItem + '"]').prop('disabled', true);
                $dropdown3.find('option[value="' + selectedItem + '"]').prop('disabled', true);
            }
        });

        $dropdown2.change(function() {
            $dropdown3.empty().append($dropdown2.find('option').clone());
            var selectedItem = $(this).val();
            if (selectedItem) {
                $dropdown3.find('option[value="' + selectedItem + '"]').prop('disabled', true);
            }
        });
});

</script>
</head>
<body>
  <select name="project_manager[]" multiple="multiple">
  <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
</select>

<select name="test_engineer[]" multiple="multiple" >
  <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
</select>
<select name="viewer[]" multiple="multiple">
  <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
</select>
  <script>
    // tell the embed parent frame the height of the content
    if (window.parent && window.parent.parent){
      window.parent.parent.postMessage(["resultsFrame", {
        height: document.body.getBoundingClientRect().height,
        slug: "vrLr9wyg"
      }], "*")
    }
  </script>
</body>
</html>


$（窗口）。加载（函数（）{
var$dropdown1=$（“选择[name='project\u manager[]']）；
var$dropdown2=$（“选择[name='test_engineer[]']）；
var$dropdown3=$（“选择[name='viewer[]']”）；
$dropdown1.change（函数（）{
$dropdown2.empty（）.append（$dropdown1.find（'option'）.clone（））；
$dropdown3.empty（）.append（$dropdown2.find（'option'）.clone（））；
var selectedItem=$（this.val（）；
如果（选择编辑项）{
$dropdown2.find（'option[value=“”+selectedItem+''“]'））.prop（'disabled'，true）；
$dropdown3.find（'option[value=“”+selectedItem+''“]'））.prop（'disabled'，true）；
}
});
$dropdown2.change（函数（）{
$dropdown3.empty（）.append（$dropdown2.find（'option'）.clone（））；
var selectedItem=$（this.val（）；
如果（选择编辑项）{
$dropdown3.find（'option[value=“”+selectedItem+''“]'））.prop（'disabled'，true）；
}
});
});
测试1
测试2
测试3
测试1
测试2
测试3
测试1
测试2
测试3
//告诉嵌入父帧内容的高度
if（window.parent&&window.parent.parent）{
window.parent.parent.postMessage（[“resultsFrame”{
高度：document.body.getBoundingClientRect（）.height，
鼻涕虫：“vrLr9wyg”
}], "*")
}

是否要禁用某个值或整个下拉列表？有一个不同点，我想禁用该值。请提供JSFIDLE link？。在我看来，这似乎是一个通用javascript问题。你应该考虑对我的答案有一个基本的掌握。[链接]（）的jquery函数参考当我将css添加到下拉列表中时，上述功能将不起作用。

   if (selectedItem) {

    $(selectedItem).each(function(v,i) {

    $dropdown2.find('option[value="' + i + '"]').prop('disabled', true);

    $dropdown3.find('option[value="' + i + '"]').prop('disabled', true);

                                });