根据从辅助下拉列表中选择的选项启用下拉列表

Question

从另一个下拉列表中选择一个选项后，我无法启用下拉列表。我在下拉列表中用于搜索元素的 jquery/javascript 代码之间似乎存在冲突，因为如果我不嵌入搜索 [=27]，我用于启用第二个下拉列表的 javascript 就会起作用=] 插件.

我已经包含了下面的代码，但这里有一个 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 用于启用二级下拉列表：

$(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"))
});

如有任何帮助，我们将不胜感激。

Answer 1

当修改使用 bootstrap-select 插件的下拉菜单的禁用状态时，您必须随后在下拉菜单上调用 selectpicker('refresh') 以根据 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

根据从辅助下拉列表中选择的选项启用下拉列表

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

javascript

jquery

list

dynamic

dropdown