фильтр DDL на основе выбора другого DDL

Question

Если у меня есть DropDownList, который выглядит следующим образом:

<select class="form-control" id="FirstDDL" name="FirstDDL"> 
    <option value="1">Option1</option> 
    <option value="2">Option2</option> 
    <option value="3">Option3</option> 
</select> 

И еще DropDownList, который выглядит следующим образом:

<select class="form-control" id="SecondDDL" name="SecondDDL"> 
    <option value="">Select Option</option> 
    <optgroup label="Option1"> 
     <option value="12">SubOption1Value1</option> 
     <option value="13">SubOption1Value2</option> 
     <option value="14">SubOption1Value3</option> 
    </optgroup> 
    <optgroup label="Option2"> 
     <option value="49">SubOption2Value1</option> 
     <option value="50">SubOption2Value2</option> 
     <option value="51">SubOption2Value3</option> 
    </optgroup> 
    <optgroup label="Option3"> 
     <option value="33">SubOption3Value1</option> 
     <option value="34">SubOption3Value2</option> 
     <option value="35">SubOption3Value3</option> 
    </optgroup> 
</select> 

Теперь, основываясь на выборе первый раскрывающийся список, я хочу, чтобы второй раскрывающийся список был отфильтрован.

Так что, если я выбираю Option1 в первом DropDownList .. то второй DropDownList должен показывать только варианты под <optgroup label="Option1">

меня это до сих пор:

$(document).ready(function() { 

    $("#FirstDDL").change(function() { 
     var selectedOption = $("option:selected", this); 
     var selectedText = selectedOption.val(); 

     switch (selectedText) { 
      case 1: 
       // here is where I need to set the values of the second dropdownlist 
     } 

    }); 
}); 

Любая помощь приветствуется.

Answer 1

Вы можете заполнить второе раскрывающееся меню динамически. Пример: ...

switch (selectedText) { 
      case 1: 
       $("<option/>", { value: 12, html: "SubOption1Value1" }).appendTo($("secondDDL")); 
       $("<option/>", { value: 13, html: "SubOption1Value2" }).appendTo($("secondDDL")); 
       $("<option/>", { value: 14, html: "SubOption1Value3" }).appendTo($("secondDDL")); 
} 

...

Answer 2

Вы можете скрыть все опции группы, и условно показывать только опцию группы, которая была выбираемый из первого выпадающего списка.

Использование жестко запрограммированный заявление случай:

https://jsfiddle.net/mbrj7t2b/1/

$(document).ready(function() { 

    $("#FirstDDL").change(function() { 
     var thisValue = $(this).val(); 

     var $optGroups = $("#SecondDDL optgroup"); 
     $optGroups.hide(); 

     switch (thisValue) { 
      case "1": 
       $optGroups.filter("[label='Option1']").show(); 
       break; 
      case "2": 
       $optGroups.filter("[label='Option2']").show(); 
       break; 
      case "3": 
       $optGroups.filter("[label='Option3']").show(); 
       break; 
     } 

    }); 
}); 

---

Использование атрибута для динамического скрытия/отображения:

Лично я не как жестко-кодирующие вещи, когда мне это не нужно. Я бы добавил атрибут в группы опций, чтобы скрыть/показать можно динамически.

https://jsfiddle.net/mbrj7t2b/2/

Обратите внимание на добавленную data-optgroupval, значение которого соответствует соответствующий параметр из первого выпадающего списка.

<select class="form-control" id="FirstDDL" name="FirstDDL"> 
    <option>Select Option 1</option> 
    <option value="1">Option1</option> 
</select> 
<select class="form-control" id="SecondDDL" name="SecondDDL"> 
    <option value="">Select Option 2</option> 
    <optgroup label="Option1" data-optgroupval="1"> 
     <option value="12">SubOption1Value1</option> 
     <option value="13">SubOption1Value2</option> 
     <option value="14">SubOption1Value3</option> 
    </optgroup> 
</select> 

$(document).ready(function() { 

    $("#FirstDDL").change(function() { 
     var thisValue = $(this).val(); 

     var $optGroups = $("#SecondDDL optgroup"); 
     $optGroups.hide(); 

     $optGroups.filter("[data-optgroupval="+thisValue+"]").show(); 

    }); 
});