禁用<select> <option>

Question

我的网页上有两个<select>元素。看看这把小提琴。

正如您所看到的，我们不能在原点和目的地中选择相同的选项。但是，每当某个选项被禁用时，即使在选择了其他元素之后，也不会再次启用该选项。

如何再做一次disabled选项enabled？

Answer 1

​

$(document).ready(function(){

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

​

Answer 2

尝尝这个。

$(document).ready(function(){

    $('#origin').change(function(){

        var airportOrigin=($(this).val());
        var airportDestination=$('#destination').val();

         $("#destination option").attr("disabled", false);

         $("#destination option:contains('"+ airportOrigin + "')").attr("disabled",true);

    });

});