I kindly need help on dependent drop down list in zend framework for php. I go through many answers but my problem still persists.
I want to create two dropdown on the basis of ajax response. On the basis on 1st dropdown selection second dropdown will populate.
my ajax response is like
{"val1":"text1","val2":"text1","text3":{"subval1":"subtext1","subval2":"subtext2","subval3":"subtext3"},"text4":{newsubval1:newsubtext1,newsubval2:newsubtext2},"others":"Others"}
i want if i select text1 2nd dropdown remains hidden, and if i select text3 then only 3 option will display in 2nd dropdown.
i tried it like
res = JSON.parse(res);
$el = $(".first-dropdown");
$subel = $(".second-dropdown");
$el.empty();
$subel.empty();
$el.append($("<option></option>")
.attr("value", '').text('Please Select'));
$.each(res, function(value, key) {
if(key instanceof Object || key instanceof Array) {
$el.append($("<option></option>")
.attr("value", value).text(value));
$.each(key, function(value1, key1) {
$subel.append($("<option></option>")
.attr("value", value1).text(key1));
});
} else {
$el.append($("<option></option>")
.attr("value", value).text(key));
}
});
my html code is like
<div class="col-xs-12 first" id="first">
<label for="message-text" class="col-xs-6 col-sm-4 control-label">first request*</label>
<select class="first-dropdown" style="width: 300px;">
<option >--Select Reason--</option>
</select>
</div>
<div class="col-xs-12 second hidden" id="explaination">
<label for="message-text" class="col-xs-6 col-sm-4 control-label">Second Request*</label>
<select class="second-dropdown" style="width: 300px;">
<option >--Explain Reason--</option>
</select>
</div>
but it shows all values in 2nd dropdown . I want only values of selected option in second dropdown.