無効<select><option>

Question

私のWebページには2つの<select>要素があります。 this fiddleをチェックしてください。

ご覧のとおり、出発地と目的地の両方で同じオプションを選択することはできません。しかし、オプションが無効になるたびに、他の要素が選択された後でも、再び有効になりません。

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); 

    }); 

});