создать динамическое выпадающее меню, используя карту строк

Question

HTML будет выглядеть

<div class="col-xs-12 col-sm-3 col-md-3"> 
 
    <label>Status</label> 
 
</div> 
 
<div class="col-xs-12 col-sm-3 col-md-3"> 
 
    <div class="input-group"> 
 
\t  <div class="input-group-addon"> 
 
\t \t  <i class="fa fa-filter"></i> 
 
\t  </div> 
 
\t \t \t \t \t \t 
 
\t  <select class="form-control pull-right" name="status" id="status" tabindex="2"> 
 
\t \t <option value="1">Enable</option> 
 
       <option value="0">Disable</option> 
 
      </select> 
 
     
 
      <select class="form-control pull-right" name="status_reason" id="status_reason" tabindex="2"> 
 
\t   <option value=""></option> 
 
\t   <option value=""></option> 
 
       <option value=""></option> 
 
\t   <option value=""></option> 
 
      </select> 
 
\t \t \t \t \t \t 
 
    </div><!-- /.input group -->

После пользователь выбирает статус из состояния выпадающего списка, который либо включен или отключен еще один выпадающий должен отображаться (т.е. выпадающее меню status_reason) в зависимости от выбора раскрывающегося списка. Динамические значения будут храниться на карте, содержащей строку как ключ и значение.

Answer 1

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

$(document).ready(function(){ 
 
    
 
    var map0 = new Object(); // or var map = {}; 
 
    map0["value0_0"] = "reason0_0"; 
 
    map0["value0_1"] = "reason0_1"; 
 
    map0["value0_2"] = "reason0_2"; 
 

 
    var map1 = new Object(); // or var map = {}; 
 
    map1["value1_0"] = "reason1_0"; 
 
    map1["value1_1"] = "reason1_1"; 
 
    map1["value1_2"] = "reason1_2"; 
 

 
    var reasons = [map0, map1]; 
 

 
    $("#status").change(function(){ 
 
    
 
    $("#status_reason").empty(); 
 
    
 
    var selected_status = $(this).val(); 
 
    var reason_value_map = reasons[parseInt(selected_status)] 
 

 
    for(var k in reason_value_map) 
 
    { 
 
     $("#status_reason").append('<option value="'+k+'">'+reason_value_map[k]+'</option>'); 
 
    } 
 
    
 
    
 
    }); 
 
    
 
    $("#status").change(); //populate the second DD on document ready 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="col-xs-12 col-sm-3 col-md-3"> 
 
    <label>Status</label> 
 
</div> 
 
<div class="col-xs-12 col-sm-3 col-md-3"> 
 
    <div class="input-group"> 
 
\t  <div class="input-group-addon"> 
 
\t \t  <i class="fa fa-filter"></i> 
 
\t  </div> 
 
\t \t \t \t \t \t 
 
\t  <select class="form-control pull-right" name="status" id="status" tabindex="2"> 
 
\t \t <option value="1">Enable</option> 
 
       <option value="0">Disable</option> 
 
      </select> 
 
     
 
      <select class="form-control pull-right" name="status_reason" id="status_reason" tabindex="2"> 
 
\t   <option value=""></option> 
 
\t   <option value=""></option> 
 
       <option value=""></option> 
 
\t   <option value=""></option> 
 
      </select> 
 
\t \t \t \t \t \t 
 
    </div><!-- /.input group -->