根據輔助下拉列表中的選定選項啟用下拉列表

Question

從另一個下拉列表中選擇一個選項后，我無法啟用下拉列表。 我在下拉列表中用於搜索元素的jquery / javascript代碼之間似乎存在沖突，因為如果我未嵌入搜索jquery插件，則用於啟用第二個下拉列表的JavaScript會起作用。

我已經在下面包含了代碼，但這是一個jsfiddle示例。

的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') ，以根據文檔進行更新。

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

更新的小提琴

根據輔助下拉列表中的選定選項啟用下拉列表

問題描述

1 個解決方案

解決方案1
0 已采納 2016-10-23 12:18:20

根據輔助下拉列表中的選定選項啟用下拉列表

問題描述

1 個解決方案

解決方案1 0 已采納 2016-10-23 12:18:20

解決方案1
0 已采納 2016-10-23 12:18:20