Question

我从这里复制了一些代码并在两组代码上实现了它。目标是防止已选择的选项在其他选择列表中被选中（如果它们具有相同的类）。通常它可以工作（左侧选项列表），但它似乎不会自动使用Bootstrap Select with Search（右侧选项列表），因为我注意到它创建了一些新元素。

有人可以帮我解决这个问题吗？

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>

  <meta charset="utf-8">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <link rel="stylesheet" href="dist/css/bootstrap-select.css">

  <style>
    body {
      padding-top: 70px;
    }
  </style>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script src="dist/js/bootstrap-select.js"></script>
</head>
<body>
<div class="container">
  <form class="form-horizontal" role="form">
    <div class="form-group">
        <div class="col-lg-5">
            <h3>no selectpicker class</h3>
            <select class="show-tick form-control noBSselect">
                <option value="--Select--">--Select--</option>
                <option value="Strength">Strength</option>
                <option value="Agility">Agility</option>
                <option value="Constitution">Constitution</option>
                <option value="Dexterity">Dexterity</option>
                <option value="Charm">Charm</option>
                <option value="Luck">Luck</option>
            </select>
            <select class="show-tick form-control noBSselect">
                <option value="--Select--">--Select--</option>
                <option value="Strength">Strength</option>
                <option value="Agility">Agility</option>
                <option value="Constitution">Constitution</option>
                <option value="Dexterity">Dexterity</option>
                <option value="Charm">Charm</option>
                <option value="Luck">Luck</option>
            </select>
            <select class="show-tick form-control noBSselect">
                <option value="--Select--">--Select--</option>
                <option value="Strength">Strength</option>
                <option value="Agility">Agility</option>
                <option value="Constitution">Constitution</option>
                <option value="Dexterity">Dexterity</option>
                <option value="Charm">Charm</option>
                <option value="Luck">Luck</option>
            </select>
        </div>
        <div class="col-lg-5">
            <h3>with selectpicker class</h3>
            <select class="selectpicker show-tick form-control withBSselect" data-live-search="true">
                <option value="--Select--">--Select--</option>
                <option disabled>sample</option>
                <option value="Strength">Strength</option>
                <option value="Agility">Agility</option>
                <option value="Constitution">Constitution</option>
                <option value="Dexterity">Dexterity</option>
                <option value="Charm">Charm</option>
                <option value="Luck">Luck</option>
            </select>
            <br/>
            <select class="selectpicker show-tick form-control withBSselect" data-live-search="true">
                <option value="--Select--">--Select--</option>
                <option disabled>sample</option>
                <option value="Strength">Strength</option>
                <option value="Agility">Agility</option>
                <option value="Constitution">Constitution</option>
                <option value="Dexterity">Dexterity</option>
                <option value="Charm">Charm</option>
                <option value="Luck">Luck</option>
            </select>
            <br/>
            <select class="selectpicker show-tick form-control withBSselect" data-live-search="true">
                <option value="--Select--">--Select--</option>
                <option disabled>sample</option>
                <option value="Strength">Strength</option>
                <option value="Agility">Agility</option>
                <option value="Constitution">Constitution</option>
                <option value="Dexterity">Dexterity</option>
                <option value="Charm">Charm</option>
                <option value="Luck">Luck</option>
            </select>
        </div>

      <br/><br/>
    </div>

  </form>
</div>

<script>
  $(document).ready(function () {
    //without bs-select
    var $noBSselect = $(".noBSselect");
    $noBSselect.on("change", function() {

        $noBSselect.find("option").prop("disabled", false);

        $noBSselect.each(function() {
           $noBSselect.not(this)
                .find('option[value="' + this.value + '"]')
                .prop("disabled", true); 
        });

    });

    //with bs-select
    var $withBSselect = $(".withBSselect");
    $withBSselect.on("change", function() {

        $withBSselect.find("option").prop("disabled", false);

        $withBSselect.each(function() {
           $withBSselect.not(this)
                   .find('option[value="' + this.value + '"]')
                   .prop("disabled", true); 
        });

    });

  });
</script>
</body>
</html>

如果在同一类下选择，则禁用相同选项[使用Bootstrap Select]

0 个答案: