CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
sequel
sequel

Reputation: 196

silviomoreto bootstrap-select not working

I have two <select> on my web page.

The two dropdowns are dependent on each other. Suppose, if I select option1 on the first dropdown, option1 will get disabled on the second dropdown.

It works if I use "normal" dropdowns. Check out this link

But if I use "bootstrap-select" by silviomoreto, the disable does not function correctly.

Check out this link

Please help me to make it work using bootstrap-select.

Thanks

Upvotes: 1

Views: 557

Answers (1)

kyun
kyun

Reputation: 10264

$(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>

Actually, It's not perfect code.

Try fix plz.

I'm sorry.

Upvotes: 1

Related Questions