Disable multiple values in dropdowns based on another dropdown

I want disable multiple values in the second and third dropdown based on first dropdown selected values.I am able to do this for single selected value.But,How to do this for multiple selected values.

I have 3 drop downs and all are multi select drop downs. My code is,

<!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>

1 answer

  • answered 2018-07-11 06:23 Mohan Prajapati

       if (selectedItem) {
    
        $(selectedItem).each(function(v,i) {
    
        $dropdown2.find('option[value="' + i + '"]').prop('disabled', true);
    
        $dropdown3.find('option[value="' + i + '"]').prop('disabled', true);
    
                                    });