如何写动态的联动下拉框,4联动下拉框-白红宇

强烈建议你试试无所不能的chatGPT，快点击我

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

阅读量：5936 次

发布时间：2019-06-19

本文共 9369 字，大约阅读时间需要 31 分钟。

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

选择前如下:

选择中:

选择后下拉框都是联动的，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>

后台代码如下:

public void setCarBasic(String[] idArray){

List list = testService.getCarDetail(idArray[0]);

tbCarBasicList = new ArrayList<TbCarBasic>();

System.out.println("tbCarBasicList.size():" + tbCarBasicList.size());

}

获取车型代码如下:

public String getCarModel(){

System.out.println("carBrand--------------------" + carBrand);

response().setCharacterEncoding("UTF-8");

response().setContentType("text/html;charset=UTF-8");

try {

StringBuffer sb = new StringBuffer();

String str = "[{'name':'1','value':'1'},{'name':'2','value':'2'}]";

List<TbCarBasic> list = testService.getCarModels(carBrand);

sb.append("[");

for(int i=0;i<list.size();i++){

TbCarBasic t = list.get(i);

if(i==0){

sb.append("{'name':'"+t.getCarName()+"','value':'"+t.getCarId()+"'}");

}else{

sb.append(",{'name':'"+t.getCarName()+"','value':'"+t.getCarId()+"'}");

}

}

sb.append("]");

// System.out.println(sb.toString());

response().getWriter().write(sb.toString());

response().getWriter().close();

} catch (IOException e) {

e.printStackTrace();

}

return null;

}

获取具体车型代码如下:

public String getCarDetail(){

// System.out.println("--------------------");

response().setCharacterEncoding("UTF-8");

response().setContentType("text/html;charset=UTF-8");

try {

StringBuffer sb = new StringBuffer();

String str = "[{'name':'1','value':'1'},{'name':'2','value':'2'}]";

List<TbCarDetail> list = testService.getCarDetail(carId);

sb.append("[");

for(int i=0;i<list.size();i++){

TbCarDetail t = list.get(i);

if(i==0){

sb.append("{'name':'"+t.getModelName()+"','value':'"+t.getModelId()+"'}");

}else{

sb.append(",{'name':'"+t.getModelName()+"','value':'"+t.getModelId()+"'}");

}

}

sb.append("]");

System.out.println(sb.toString());

response().getWriter().write(sb.toString());

// response().getWriter().write(str);

response().getWriter().close();

} catch (IOException e) {

e.printStackTrace();

}

return null;

}

转载于:https://blog.51cto.com/xqsea/1119702

你可能感兴趣的文章

『003』索引-脚本

CH5102 Mobile Service

C++当中的virtual继承

手机H5显示一像素的细线

分页(thinkphp5.0版本)

OCP新题，2019题库出现大量新题，062-第22题

int *ptr=(int *)(&a+1)问题的探讨

帮助-阅读随笔

Quartus 12的TimeQuest Timing Analyzer

JavaScript: 代码简洁之道

Integer跟int的区别（备份回忆）

sourcetree合并分支

详解分布式应用程序协调服务Zookeeper

LeetCode 208: Implement Trie (Prefix Tree)

zoc license code

【转】PreparedStatement的用法

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！

当前时间: 2024-12-28 12:30:18 当前IP: 3.145.179.30 联系邮箱:javaeecc@qq.com Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2

强烈建议你试试无所不能的CHAT-GPT，快点击我

强烈建议你试试无所不能的CHAT-GPT，快点击我