如何使用ajax响应和php进行两次依赖下拉？

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.