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

时间:2015-08-23 23:27:00

标签: javascript php jquery html ajax

我在php的zend框架中需要关于依赖下拉列表的帮助。我经历了很多答案,但我的问题仍然存在。

我想在ajax响应的基础上创建两个下拉列表。在第一个下拉选择的基础上,将填充第二个下拉列表。

我的ajax响应就像

{"val1":"text1","val2":"text1","text3":{"subval1":"subtext1","subval2":"subtext2","subval3":"subtext3"},"text4":{newsubval1:newsubtext1,newsubval2:newsubtext2},"others":"Others"}

我想如果我选择text1第二个下拉列表仍然隐藏,如果我选择text3,那么第二个下拉列表中只会显示3个选项。

我尝试过像

                        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));
                                }
                            });

我的HTML代码就像

  <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>

但它显示第二个下拉列表中的所有值。我只希望在第二个下拉列表中选择选项的值。

0 个答案:

没有答案