Включение раскрывающегося списка на основе выбранной опции из вторичного раскрывающегося списка

У меня возникли проблемы с включением выпадающего списка после выбора опции из другого раскрывающегося списка. Кажется, что существует конфликт между кодом jquery/javascript, который я использую для элемента поиска в раскрывающихся списках, поскольку мой javascript для включения второго раскрывающегося списка работает, если я не внедряю плагин jquery для поиска.Включение раскрывающегося списка на основе выбранной опции из вторичного раскрывающегося списка

Я включил код ниже, но вот 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")) 
});

Любая помощь будет оценена.

источник

2016-10-23 Yuvi100

При изменении отключенного состояния выпадающего списка, использующего плагин для загрузки, вы должны вызвать 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

источник

2016-10-23 12:18:20 xorspark

Спасибо, однако, теперь вопрос в том, что, когда элемент, выбранный из первого списка имеет значение = «1» он должен показать только список опций, которые имеют отн =» 1 "во втором раскрывающемся списке. – Yuvi100

@ Yuvi100 Код, показывающий только совпадающие ссылки, неверен. Вам нужно изменить его на '$ subcat.find (" [rel! = "+ _ Rel +"] "). Hide();'. Я обновил свой ответ – xorspark

Удивительно! Большое спасибо :) Проблема решена. – Yuvi100

Включение раскрывающегося списка на основе выбранной опции из вторичного раскрывающегося списка

ответ

Смежные вопросы