0

我想根据一个下拉菜单禁用下拉值。我能够做到这一点。但是我想为多选添加搜索按钮和复选框，当我添加时，禁用功能不起作用。哪里出错了我不明白。我该如何解决这个问题？

我的代码除了禁用代码之外没有添加 css 和 js，

//Script from the first script tag.

$(document).ready(function() {
  $('#project_manager').multiselect({
    nonSelectedText: 'Select project_manager',
    enableFiltering: true,
    enableCaseInsensitiveFiltering: true,
    buttonWidth: '400px'
  });

  $('#test_engineer').multiselect({
    nonSelectedText: 'Select test_engineer',
    enableFiltering: true,
    enableCaseInsensitiveFiltering: true,
    buttonWidth: '400px'
  });
  $('#viewer').multiselect({
    nonSelectedText: 'Select test_engineer',
    enableFiltering: true,
    enableCaseInsensitiveFiltering: true,
    buttonWidth: '400px'
  });
});


//Script from the second script tag.
$(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) {
      $(selectedItem).each(function(v, 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) {
      $(selectedItem).each(function(v, selectedItem) {
        $dropdown3.find('option[value="' + selectedItem + '"]').prop('disabled', true);
      });
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>Webslesson Tutorial | Bootstrap Multi Select Dropdown with Checkboxes using Jquery in PHP</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />

</head>

<body>
  <select id="project_manager" name="project_manager[]" multiple class="form-control">
    <option value="Codeigniter">Codeigniter</option>
    <option value="CakePHP">CakePHP</option>
    <option value="Laravel">Laravel</option>
    <option value="YII">YII</option>
    <option value="Zend">Zend</option>
    <option value="Symfony">Symfony</option>
    <option value="Phalcon">Phalcon</option>
    <option value="Slim">Slim</option>

  </select>
  <select id="test_engineer" name="test_engineer[]" multiple class="form-control">
    <option value="Codeigniter">Codeigniter</option>
    <option value="CakePHP">CakePHP</option>
    <option value="Laravel">Laravel</option>
    <option value="YII">YII</option>
    <option value="Zend">Zend</option>
    <option value="Symfony">Symfony</option>
    <option value="Phalcon">Phalcon</option>
    <option value="Slim">Slim</option>
  </select>
  <select id="viewer" name="viewer[]" multiple class="form-control">
    <option value="Codeigniter">Codeigniter</option>
    <option value="CakePHP">CakePHP</option>
    <option value="Laravel">Laravel</option>
    <option value="YII">YII</option>
    <option value="Zend">Zend</option>
    <option value="Symfony">Symfony</option>
    <option value="Phalcon">Phalcon</option>
    <option value="Slim">Slim</option>

  </select>
</body>

</html>

4

0 回答 0