Question

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

这两个下拉列表相互依赖。假设，如果我在第一个下拉列表中选择option1，则option1将在第二个下拉列表中停用。

如果我使用"normal"下拉列表，它会起作用。查看this link

但如果我使用silviomoreto "bootstrap-select"，则禁用功能无效。

请使用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>

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

尝试修复plz。

对不起

silviomoreto bootstrap-select不工作

1 个答案: