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

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

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

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

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

最好还是用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");
            }

select联动而已javascript省市联动

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