Yuvi100 Yuvi100 - 1 month ago 9
Javascript Question

Enabling a dropdown list based on a selected option from a secondary dropdown list

I'm having trouble enabling a dropdown list after an option is selected from another dropdown list. There seems to be a conflict between the jquery/javascript code i'm using for the search element within the dropdowns, as my javascript for enabling the second dropdown works if I don't embed the search jquery plugin.

I've included the code below, but here's a jsfiddle example.

HTML

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>
</head>
<body>
<select id="cat" name="cat1" class="selectpicker" data-live-search="true" >
<option value>Select Brand</option>
<option value="1">A.E.G</option>
<option value="2">Airflow</option>
<option value="3">Alfatec</option>
<option value="4">Aquavac</option>
<option value="5">Aussievac</option>
</select>

<select id="subcat" name="subcat" disabled="disabled" class="selectpicker" data-live-search="true" >
<option class="lablel" value>Select Model</option>
<option rel="1" value="1" label="UNI 98">Vampyr 5000 series</option>
<option rel="1" value="2" label="UNI 140">Vampyr 5030</option>
<option rel="2" value="1" label="UNI 95">7150</option>
<option rel="2" value="2" label="UNI 154">7250, 2100</option>
<option rel="2" value="3" label="UNI 500">Beetle 1200</option>
<option rel="2" value="4" label="UNI 45">Galaxy 1300</option>
<option rel="2" value="5" label="UNI 140">Phantom, Dominator, Monte Carlo</option>
<option rel="2" value="6" label="UNI 140">Rascal, Hornet, Raptor</option>
<option rel="2" value="7" label="UNI 140">Rebel, HSP</option>
<option rel="3" value="1" label="UNI 71">Extractec 30</option>
<option rel="4" value="1" label="UNI 43">600, 610, 612, 620, 333, 790, 810</option>
<option rel="4" value="2" label="UNI 44">Domestica 960</option>
<option rel="4" value="3" label="UNI 43">Super 30/40</option>
<option rel="4" value="4" label="UNI 44">Super 40</option>
<option rel="5" value="1" label="UNI 136">All Models</option>
</select>

<input id="txtBox" type="text" placeholder="REQUIRED ITEM" style="text-align: center">
</body>
</html>


Javascript for enabling the secondary dropdown list:

$(function(){

var $cat = $("#cat"),
$subcat = $("#subcat");

$cat.on("change",function(){
var _rel = $(this).val();
$subcat.find("option").attr("style","");
$subcat.val("");
if(!_rel) return $subcat.prop("disabled",true);
$subcat.find("[rel="+_rel+"]").show();
$subcat.prop("disabled",false);});
});

$("#subcat").change(function () {
var selectedLabel = $(this).val();
$("#txtBox").val($(this).find("option:selected").attr("label"))
});


Any help would be appreciated.

Answer

When modifying the disabled state of a dropdown that is using the bootstrap-select plugin, you have to call selectpicker('refresh') on the dropdown afterward to update it per the documentation.

$cat.on("change",function(){
    var _rel = $(this).val();
    $subcat.find("option").attr("style","");
    $subcat.val("");
    if(!_rel) {
      $subcat.prop("disabled", true);
      $subcat.selectpicker('refresh');
      return;
    }
    $subcat.find("[rel!="+_rel+"]").hide();
    $subcat.prop("disabled", false);
    $subcat.selectpicker('refresh');
});

Updated fiddle