javascript - create dynamic dropdown menu using an map of strings -
html like
<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"> <div class="input-group-addon"> <i class="fa fa-filter"></i> </div> <select class="form-control pull-right" name="status" id="status" tabindex="2"> <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"> <option value=""></option> <option value=""></option> <option value=""></option> <option value=""></option> </select> </div><!-- /.input group -->after user selects status status dropdown box either enabled or disabled 1 more dropdown should displayed(i.e status_reason dropdown) depending on selection of status dropdown. dynamic values there stored in map containing string key , value.
do need this. have hard coded map values can assign variable own source.
$(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 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"> <div class="input-group-addon"> <i class="fa fa-filter"></i> </div> <select class="form-control pull-right" name="status" id="status" tabindex="2"> <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"> <option value=""></option> <option value=""></option> <option value=""></option> <option value=""></option> </select> </div><!-- /.input group -->
Comments
Post a Comment