Question

从另一个下拉列表中选择一个选项后，我无法启用下拉列表。我正在使用下拉列表中的搜索元素的jquery / javascript代码之间似乎存在冲突，因为如果我没有嵌入搜索jquery插件，我启用第二个下拉列表的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插件的下拉列表的禁用状态时，您必须在下拉列表中调用<uses-permission android:name="android.permission.INTERNET"></uses-permission> <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"></uses-permission> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"></uses-permission>以根据documentation更新它。

selectpicker('refresh')

Updated fiddle

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

1 个答案: