一个下拉框联动的简单例子

<%@ include file="../bas/headSearch.jsp"%>
<BODY class="classSearchBody"   οnkeypress="DoKeyPress();">
<html:form  styleId="frmSearch" action="/ssm/cdSwtInfoList.do?action=list" target="right_frame">
<table border=0 cellspacing=2 cellpadding=2 width="100%">

<tr>
<td class="classSearchTitle">类别名称:<br>
        <html:select name="basMapForm" property="hs(codeType)"  style="width:100%" οnchange="clearInput();">
        <option></option>
            <ltcm:listcodetp />
        </html:select>
        </td>
</tr>

<tr id="ctn">
<td class="classSearchTitle">类别名称:<br><html:text name="basMapForm" property="hs(codeTypeName)"  style="width:100%" /></td>
</tr>

<tr>
<td class="classSearchTitle">代码值:<br><html:text name="basMapForm" property="hs(baseCode)"  style="width:100%" /></td>
</tr>

<tr>
<td class="classSearchTitle">代码名称:<br><html:text name="basMapForm" property="hs(baseName)" style="width:100%" /></td>
</tr>
<tr>
<td align=right><button name="btnSearch" οnclick="DoSearch();">查询</button></td>
</tr>
</table>


<input type=hidden name="intTotalPages">
<input type=hidden name="intCurrentPage">
</html:form>

<script defer>
function clearInput()
{
    var obj=document.getElementById("hs(codeType)");
    var ctn=document.getElementById("ctn");
    if(obj.options[obj.selectedIndex].innerText!='')
    {
        document.getElementById("hs(codeTypeName)").value="";
        ctn.style.display="none";
    }
    else
    {
        ctn.style.display="";
    }

}

</script>
</BODY>
</HTML>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
三级联动下拉框,也称为省市区三级联动,是常见的前端交互功能之一。下面是一个用JSP实现例子: 1. 在JSP页面中添加三个select元素,分别对应省、市和区县: ```html 省:<select id="province" name="province" onchange="loadCity()"> <option value="">请选择省份</option> <option value="北京市">北京市</option> <option value="上海市">上海市</option> <<option value="广东省">广东省</option> </select> 市:<select id="city" name="city" onchange="loadDistrict()"> <option value="">请选择城市</option> </select> 区:<select id="district" name="district"> <option value="">请选择区县</option> </select> ``` 2. 在页面底部添加JavaScript代码,用于异步加载对应的市和区县选项: ```javascript function loadCity() { var province = document.getElementById("province").value; var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("city").innerHTML = xmlhttp.responseText; document.getElementById("district").innerHTML = "<option value=''>请选择区县</option>"; } } xmlhttp.open("GET", "getCity.jsp?province=" + province, true); xmlhttp.send(); } function loadDistrict() { var city = document.getElementById("city").value; var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("district").innerHTML = xmlhttp.responseText; } } xmlhttp.open("GET", "getDistrict.jsp?city=" + city, true); xmlhttp.send(); } ``` 3. 在后端编写getCity.jsp和getDistrict.jsp,用于返回对应的市和区县选项: getCity.jsp ```java <%@ page contentType="text/html; charset=UTF-8" language="java" %> <% String province = request.getParameter("province"); if (province.equals("北京市")) { %> <option value="东城区">东城区</option> <option value="西城区">西城区</option> <option value="朝阳区">朝阳区</option> <option value="海淀区">海淀区</option> <option value="丰台区">丰台区</option> <% } else if (province.equals("上海市")) { %> <option value="黄浦区">黄浦区</option> <option value="徐汇区">徐汇区</option> <option value="长宁区">长宁区</option> <option value="静安区">静安区</option> <option value="普陀区">普陀区</option> <% } else if (province.equals("广东省")) { %> <option value="广州市">广州市</option> <option value="深圳市">深圳市</option> <option value="珠海市">珠海市</option> <option value="汕头市">汕头市</option> <option value="韶关市">韶关市</option> <% } %> ``` getDistrict.jsp ```java <%@ page contentType="text/html; charset=UTF-8" language="java" %> <% String city = request.getParameter("city"); if (city.equals("东城区")) { %> <option value="东华门街道">东华门街道</option> <option value="景山街道">景山街道</option> <option value="交道口街道">交道口街道</option> <option value="东四街道">东四街道</option> <option value="灯市口街道">灯市口街道</option> <% } else if (city.equals("西城区")) { %> <option value="西长安街街道">西长安街街道</option> <option value="新街口街道">新街口街道</option> <option value="金融街街道">金融街街道</option> <option value="什刹海街道">什刹海街道</option> <option value="西四街道">西四街道</option> <% } else if (city.equals("朝阳区")) { %> <option value="朝外街道">朝外街道</option> <option value="建外街道">建外街道</option> <option value="呼家楼街道">呼家楼街道</option> <option value="三里屯街道">三里屯街道</option> <option value="团结湖街道">团结湖街道</option> <% } %> ``` 注意事项: 1. 前端需要加载jQuery库或自己实现XMLHttpRequest对象的异步请求。 2. 后端需要根据实际情况编写对应的数据返回逻辑。 3. 代码中的数据仅为示例,实际应用需要根据实际需求进行修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值