javascript - silviomoreto bootstrap-select 不工作

Question

我有两个 <select>在我的网页上。

这两个下拉菜单相互依赖。假设，如果我选择 option1在第一个下拉菜单中，option1将在第二个下拉菜单中被禁用。

如果我使用 "normal" 就可以了下拉菜单。查看this link

但如果我使用 "bootstrap-select"由 silviomoreto 设计，禁用功能无法正常运行。

查看 this link

请帮助我使用 bootstrap-select 让它工作.

谢谢

Answer 1

$(document).ready(function(){

    $('#origin').change(function(){
        var airportOrigin=$(this).val();
        var airportDestination=$('#destination').val();
        $("li a").removeClass("disabled");
        $("li a:contains('"+ airportOrigin + "')").attr("disabled",true);
				$("li a:contains('"+ airportOrigin + "')").addClass("disabled");
    });

});

a.disabled {
   pointer-events: none;
   cursor: default;
   background-color: lightgray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.css" rel="stylesheet"/>
<div class="form-group">
   								 <label for="origin">Origin:<p> </p></label>
     
      								<select id= "origin"  data-live-search="true" class="selectpicker form-control" data-size="5" title="Select Destination">
       									<option data-subtext="DEL" data-tokens="DEL New Delhi">New Delhi</option>
        								<option data-subtext="BOM" data-tokens="BOM Mumbai">Mumbai</option>
        								<option value="Kolkata" data-subtext="CCU" data-tokens="CCU Kolkata">Kolkata</option>
        								<option data-subtext="BLR" data-tokens="BLR Bangalore">Bangalore</option>
        								<option data-subtext="MAA" data-tokens="MAA Chennai">Chennai</option>
        								<option data-subtext="PNQ" data-tokens="PNQ Pune">Pune</option>
        								<option data-subtext="GOI" data-tokens="GOI Goa">Goa</option>
        								<option data-subtext="GAU" data-tokens="GAU Guwahati">Guwahati</option>
        								<option data-subtext="ISK" data-tokens="ISK Gandhinagar">Gandhinagar</option>
        								<option data-subtext="IXJ" data-tokens="IXJ Jammu">Jammu</option>
        								<option data-subtext="BHO" data-tokens="BHI Bhopal">Bhopal</option>
        								<option data-subtext="IXA" data-tokens="IXA Agartala">Agartala</option>
      								</select>
							</div>
              
              <div class="form-group">
   								 <label for="destination">Destination:<p> </p></label>
     
      								<select id= "destination"  data-live-search="true" class="selectpicker form-control" data-size="5" title="Select Destination">
       									<option data-subtext="DEL" data-tokens="DEL New Delhi">New Delhi</option>
        								<option data-subtext="BOM" data-tokens="BOM Mumbai">Mumbai</option>
        								<option value="Kolkata" data-subtext="CCU" data-tokens="CCU Kolkata">Kolkata</option>
        								<option data-subtext="BLR" data-tokens="BLR Bangalore">Bangalore</option>
        								<option data-subtext="MAA" data-tokens="MAA Chennai">Chennai</option>
        								<option data-subtext="PNQ" data-tokens="PNQ Pune">Pune</option>
        								<option data-subtext="GOI" data-tokens="GOI Goa">Goa</option>
        								<option data-subtext="GAU" data-tokens="GAU Guwahati">Guwahati</option>
        								<option data-subtext="ISK" data-tokens="ISK Gandhinagar">Gandhinagar</option>
        								<option data-subtext="IXJ" data-tokens="IXJ Jammu">Jammu</option>
        								<option data-subtext="BHO" data-tokens="BHI Bhopal">Bhopal</option>
        								<option data-subtext="IXA" data-tokens="IXA Agartala">Agartala</option>
      								</select>
							</div>

实际上，这不是完美的代码。

请尝试修复。

对不起。