问题描述

ajax 根据一个下拉框的值的不同 另一个下拉框对应显示的值也不同

图片就是这样的，项目的类别有商户和银行两种，我要根据选择商户还是银行，让下边对应的选择已有商户 的下拉框中显示不同的数据，数据都需要通过后台去数据库里查的。
这个是不是要ajax啊？谁能告诉告诉我怎么写 。急急急 。。在线等好心人。。。。。

解决方案

html代码

                <tr>
                    <td style="width:15%">
                    一级
                    </td>
                    <td  style="text-align:left ;width:35%">
                        <select name="unitPropertiesOneLevel" id="unitPropertiesOne" onchange="gradeChange()"style="width:150px">
                                <option value="" >&nbsp;&nbsp;</option>
                            <c:forEach var="unitProperty" items="${unitPropertyInfoList}">
                                <option value="${unitProperty.propertyCode }">${unitProperty.propertyName }</option>
                            </c:forEach>
                        </select>
                    </td>
                    <td style="width:15%">
                        二级
                    </td>
                    <td style="text-align:left ;width:35%">
                        <select name="unitPropertiesTwoLevel" id="unitPropertiesTwoLevel" style="width:150px">
                            <option value="" >&nbsp;&nbsp;</option>
                        </select>
                    </td>
                </tr>

解决方案二：

最好还是用ajax来进行取值，就是级联，和获取省市县是一样的道理，这是二级级联，例如

html代码

一级

??

${unitProperty.propertyName }
/c:forEach

二级

??

javaScript代码
            function gradeChange(){
                var unitPropertiesCode=$("#unitPropertiesOne").val();
                $("#unitPropertiesTwoLevel").empty();
                $.post("<%=url%>/jobUnits/ajaxUnitPropertiesCode.do",{'unitPropertiesCode':unitPropertiesCode},function(data){
                    var dataRole = eval(data);
                    var html = "<option value=''>&nbsp;&nbsp;</option>";
                    for(var i=0;i<dataRole.length;i++){
                        html += "<option value='"+dataRole[i].propertyCode
                        +"'>"+dataRole[i].propertyName+"</option>";
                    }
                    $("#unitPropertiesTwoLevel").append(html);
                },"json");
            }

解决方案三：

可以通过也可以不通过。。。如果通过ajax的话，用户选择项目的类别之后要进行ajax更新下面的下拉框内容，如果不通过ajax的话，可以在页面第一次加载的时候获得所有的信息，这样就不需要使用ajax，但是数据可能会出现更新不及时的情况

解决方案四：

最好通过ajax去做，先获取一波第一个下拉框数据，然后客户操作第一个下拉框在选取数据动作时会做onchange动作，这时利用onchange事件通过第一个下拉框选择的数据做ajax查询，查询出相关于第二个下拉框说需要的数据，把ajax返回来的数据放进第二个下拉框即可。

解决方案五：

通过ajax来做效果会更好，当你选择不同的项目类别时，通过select框的onchange事件，发送ajax请求到服务器端请求数据，然后通过js把对应的返回数据设置到新商户下显示出来就可以了。

解决方案六：

你可以一次把级联关系请求完。
然后在前端自己根据级联关系判断显示哪个。

解决方案七：

这个简单就是一个二级级联给第一个下拉框一个change事件，，每次改变时，，第二个下拉框也同时改变，，

解决方案八：

select联动而已javascript省市联动

解决方案九：

就是级联选择列表而以了，用JS更新第二个列表的选项不就好了。