图片就是这样的,项目的类别有商户和银行两种,我要根据选择商户还是银行,让下边对应的选择已有商户 的下拉框中显示不同的数据,数据都需要通过后台去数据库里查的。
这个是不是要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="" > </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="" > </option>
</select>
</td>
</tr>
可以通过也可以不通过。。。如果通过ajax的话,用户选择项目的类别之后要进行ajax更新下面的下拉框内容,如果不通过ajax的话,可以在页面第一次加载的时候获得所有的信息,这样就不需要使用ajax,但是数据可能会出现更新不及时的情况
最好通过ajax去做,先获取一波第一个下拉框数据,然后客户操作第一个下拉框在选取数据动作时会做onchange动作,这时利用onchange事件通过第一个下拉框选择的数据做ajax查询,查询出相关于第二个下拉框说需要的数据,把ajax返回来的数据放进第二个下拉框即可。
通过ajax来做效果会更好,当你选择不同的项目类别时,通过select框的onchange事件,发送ajax请求到服务器端请求数据,然后通过js把对应的返回数据设置到新商户下显示出来就可以了。
你可以一次把级联关系请求完。
然后在前端自己根据级联关系判断显示哪个。
这个简单就是一个二级级联给第一个下拉框一个change事件,,每次改变时,,第二个下拉框也同时改变,,
最好还是用ajax来进行取值,就是级联,和获取省市县是一样的道理,这是二级级联,例如
html代码
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=''> </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更新第二个列表的选项不就好了。