如何写动态的联动下拉框,4联动下拉框

最新推荐文章于 2024-11-15 18:38:47 发布

weixin_33750452

最新推荐文章于 2024-11-15 18:38:47 发布

阅读量114

点赞数

文章标签： java javascript ViewUI

原文链接：http://blog.51cto.com/xqsea/1119702

版权

今天项目中用到了联动的下拉框，这个是经常用的小技巧，就记录了下来，界面如下。

选择前如下:

选择中:

选择后下拉框都是联动的，4个联动下拉框:

jsp页面代码如下:

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="/struts-tags" prefix="s" %>
<%
String ctx = request.getContextPath();
pageContext.setAttribute("ctx", ctx);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="<%=ctx %>/js/jquery.js" ></script>
<script type="text/javascript" src="<%=ctx%>/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="<%=ctx%>/ckfinder/ckfinder.js"></script>
<title>商家</title>
<link href="<%=ctx %>/css/class.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="<%=ctx %>/js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
function checkFile()
{
//获得选择的文件的URL
var fileURL = document.forms1.logoUplode.value;
//获得文件的扩展名
fileURLfileURLSplit = fileURL.split(".");
fileExt = fileURLSplit[fileURLSplit.length-1].toLowerCase();
alert(fileURL);
//判断是否是图片文件
if (fileExt=="jpg" || fileExt=="bmp" || fileExt=="gif" || fileExt=="png")
{
//var obj = document.getElementById('lookpic');
//obj.src = fileURL;
return true;
}
else
{
alert("请选择图片文件");
return false;
}
}
function onValidate() {
//提交保存
//验证
var dealerId = document.getElementById("dealerId").value;
var modelId = document.getElementById("tbDealerSales.modelId").value;
var modelId2 = document.getElementById("tbDealerSales.modelId2").value;
if(dealerId==""){
document.getElementById("message").innerHTML = "请选择商家！";
return false;
}
if(modelId==""){
document.getElementById("message").innerHTML = "请选择车型！";
return false;
}
if(modelId2==""){
document.getElementById("message").innerHTML = "请选择具体车型,如果没有具体车型请在车型管理中添加";
return false;
}
if(trim(document.getElementById("tbDealerSales.salesPrice").value)=="") {
document.getElementById("message").innerHTML = "报价不能为空！";
return false;
}
if(trim(document.getElementById("validStime").value)=="") {
document.getElementById("message").innerHTML = "开始日期不能为空！";
return false;
}
if(trim(document.getElementById("validEtime").value)=="") {
document.getElementById("message").innerHTML = "结束日期不能为空！";
return false;
}
return true;
}
function add(){
if(onValidate()){
document.forms[0].action="<%=ctx%>/priceAction!add.action";
document.forms[0].submit();
}
}
function trim(str){
return str.replace(/(^\s*)|(\s*$)/g, "");
}
function refreshCarBrand(val){
document.getElementById('tbDealerSales.modelId').options.length = 0;
carBrand = document.getElementById('carBrand').value;
//alert(carBrand);
var str = $.ajax({
url: '<%=ctx%>/priceAction!getCarModel.action?carBrand=' + val + '&now=' + new Date().getTime(),
async: false
}).responseText;
//str = "[{'name':'1','value':'1'},{'name':'2','value':'2'}]";
// alert(str);
str = eval("(" + str + ")");
for (var i = 0; i < str.length; i++){
//alert(str[i].value);
document.getElementById('tbDealerSales.modelId').options[i] = new Option(str[i].name,str[i].value);
}
if(document.getElementById('tbDealerSales.modelId').options.length == 0){
document.getElementById('tbDealerSales.modelId').options[i] = new Option("--暂无数据--","");
refreshCarBasic("99999");
}else{
refreshCarBasic(str[0].value);
}
}
function refreshCarBasic(val){
document.getElementById('tbDealerSales.modelId2').options.length = 0;
carBrand = document.getElementById('tbDealerSales.modelId').value;
//alert(carBrand);
var str = $.ajax({
url: '<%=ctx%>/priceAction!getCarDetail.action?carId=' + val + '&now=' + new Date().getTime(),
async: false
}).responseText;
//str = "[{'name':'1','value':'1'},{'name':'2','value':'2'}]";
str = eval("(" + str + ")");
for (var i = 0; i < str.length; i++){
//alert(str[i].value);
document.getElementById('tbDealerSales.modelId2').options[i] = new Option(str[i].name,str[i].value);
}
if(document.getElementById('tbDealerSales.modelId2').options.length == 0){
document.getElementById('tbDealerSales.modelId2').options[i] = new Option("--暂无数据--","");
}
}
function init(){
//refreshCarBrand(document.getElementById('carBrand').value);
//refreshCarBasic(document.getElementById('tbDealerSales.modelId').value);
}
function selectCarBrand(val){
//alert(val);
var str = $.ajax({
url: '<%=ctx%>/priceAction!getBand.action?dealerId=' + val ,
async: false
}).responseText;
//alert(str);
var s = "";
carBrand = document.getElementById('carBrand');
var carBrandcarBrandlength = carBrand.options.length;
for(var i=0;i<carBrandlength;i++){
if (carBrand.options[i].value == str) {
carBrand.options[i].selected=true;
break;
}
}
refreshCarBrand(str);
}
</script>
</head>
<body onload="init()">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="26" height="25"><img src="<%=ctx %>/p_w_picpaths/main/main01.jpg" width="26" height="15"></td>
<td width="62" class="bg01">当前位置：</td>
<td class="bg01"><DIV id="u3_rtf"> 报价> <span class="red">新增报价</span></DIV></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="4" background="<%=ctx %>/p_w_picpaths/main/main02.gif"><img src="<%=ctx %>/p_w_picpaths/main/main02.gif" width="6" height="4"></td>
</tr>
</table>
<s:form name="forms1" enctype="multipart/form-data" method="post">
<table border="0" width="70%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>选择商家：</td>
<td>
<s:select label="选择商家" cssStyle="width:120pt;" id="dealerId" name="tbDealerSales.dealerId" list="tbDealerInfoList" listKey="dealerId" listValue="dealerName" headerKey="" headerValue="----请选择商家----" theme="simple" onchange="selectCarBrand(this.value)"/>
<font color="red">*</font>
</td>
</tr>
<tr>
<td>选择品牌：</td>
<td>
<s:select label="选择品牌" cssStyle="width:120pt;" id="carBrand" name="carBrand" list="tbCarBrandList" listKey="brandId" listValue="brandName" headerKey="" headerValue="----请选择品牌----" onchange="refreshCarBrand(this.value)" theme="simple" disabled="true"/>
<font color="red">*一级/二级品牌,品牌在商家添加的时候已经关联</font>
</td>
</tr>
<tr>
<td>选择车型：</td>
<td>
<s:select id="tbDealerSales.modelId" cssStyle="width:120pt;" name="tbDealerSales.modelId" label="选择车型" list="#{ }" headerKey="" headerValue="----请选择车型----" onchange="refreshCarBasic(this.value)" theme="simple" />
<font color="red">*</font>
</td>
</tr>
<tr>
<td>选择具体车型：</td>
<td>
<s:select id="tbDealerSales.modelId2" cssStyle="width:120pt;" name="tbDealerSales.modelId2" label="具体车型" list="#{ }" headerKey="" headerValue="----请选择具体车型----" theme="simple"/>
<font color="red">*</font>
</td>
</tr>
<tr>
<td>汽车报价：</td>
<td>
<input type="text" name="tbDealerSales.salesPrice" id="tbDealerSales.salesPrice" onkeyup="this.value=this.value.replace(/[^\d/.]/g,'')" maxlength='4'/>
万<font color="red">*</font>
</td>
</tr>
<tr>
<td>有效期：</td>
<td>
<input name="validStime" id="validStime" class="Wdate" type="text" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'validEtime\')||\'2020-10-01\'}'})"/>至
<input name="validEtime" id="validEtime" class="Wdate" type="text" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'validStime\')}',maxDate:'2020-10-01'})"/>
<font color="red">*</font>
</td>
</tr>
<tr>
<td><input type="button" value="添加" onclick="add();"/></td>
<td>
<input type="button" value="取消" onclick="javascript:history.back();"/>
<font color="red" id="message"><s:property value="#request.errorMessage"/></font>
</td>
</tr>
</table>
</s:form>
</body>
</html>