技术标签: 联动菜单 jQuery 三级菜单 省市县 JavaScript HTML 下拉菜单 多级菜单
JSP 代码
<tr>
<td>地址:</td>
<td>
<!--第一级:省 -->
<select id="province" name="province" οnchange="f1()">
<option>---请选择---</option>
</select>
<!--第二级:市 -->
<select id="city" name="city" οnclick="f2()">
<option>---请选择---</option>
</select><!--第三级:县 -->
<select name="country" id="country">
<option>---请选择---</option>
</select>
</td>
</tr>
JS 代码
/**
* PID就是他的父ID 省的PID都是1,所以给后台传的的时候直接是1;返回一个JSON;大家都懂!
* 这个得到了第一级的
*/
$.post("getSJLD.action", {pid : 1}, function(data) {
for (var i in data) {
var op = $("<option value='" + data[i].id + "'>" + data[i].cityname + "</option>");
$("#province").append(op);
}
}, "json")});
/**
* 在下面我会解释为什么有city和country(For:回显)
* 而且大家可以看到我在追加完之后有个判断;
* 那个是修改回显的时候用到的;单纯的出现是三级联动是用不到的
* f2()同理 通过第一级得到第二级
* $("#province").val()是第一级的ID;注意不是PID!!!
*/
function f1(city,country) {
$.post("getSJLD.action", {pid : $("#province").val()}, function(data) {
$("#city").empty();
for (var i in data) {
var op = $("<option id='city"+data[i].id+"' value='"+data[i].id+"'>" + data[i].cityname + "</option>");
$("#city").append(op);
if(city!=null){
$("#city option").each(function(){
if($(this).text()==city){
$(this).attr("selected",true);
}
f2(country);
});
}
}
}, "json");
}
/* 通过第二级获取到第三级 */
function f2(country) {
$.post("getSJLD.action", {pid : $("#city").val()}, function(data) {
$("#country").empty();
for (var i in data) {
var op = $("<option>" + data[i].cityname + "</option>");
$("#country").append(op);
if(country!=null){
$("#country option").each(function(){
if($(this).text()==country){
$(this).attr("selected",true)
}
});
}
}
}, "json");
}
JS 获取三级联动的值:采用拼接的方式
var adr = "";
adr += $("#provinceoption:selected").text() + " "
+ $("#city option:selected").text() + " "
+ $("#country option:selected").text();
大家可以看到我在每个取值的后面都加了一个+” ”
这个呢是为了修改的时候取值方便。直接用split(” “) 分割就OK了;
添加成功以后的效果如图:
因为在上面我取值的时候多加了一个 ” “,所以添加到数据库的时候就会就一个间隔
接下来就是修改回显了。
首先我们要从数据库获取到值
因为我是用esayui做的 所以我的取值是这样的
/**
* 上面已经提到;在取到值得时候;因为添加的时候是" ";隔开添加的;
* 所以我们在取到值 之后用 split(" ") 切割
* citys[0] 呢就是 省 的值
* citys[1] 就是 市 的值
* citys[2] 就是 县 的值
*/
var citys=city.split(" ");
$("#province option").each(function() {
/* 遍历省下拉框;判断下拉框值是否和取到的省的值相同;
* 相同就选中;选中之后紧接着就是第二级了;上面大家应该看到了
* f1()代表第二级;所以在选中之后进行f1()
* 并将 市 和 县 的值传过去;
* (县的值在f1()里面是不用的,是为了给f2()传过去的)
*/
if($(this).text()==citys[0]){
$(this).attr("selected",true);
//var sheng = $(this).val();
f1(citys[1],citys[2]);
}
});
大家这个时候返回上面看第二级和第三级 联动那一块的判断代码
如图:
写到这里大家就应该清楚为什么要将 City 和 Country 给传过来了
第三级也是同理;便可回显!
好了!修改回显就完成了!
效果如图:
SELECT * FROM city WHERE pid = #{pid} ; -- #{pid}就是你传过去的值!
下面是表结构!
这个百度一大推!大同小异!方法是一样的!只要看好表结构知道怎么取值就行!
CREATE TABLE city (
id int(11) NOT NULL DEFAULT ‘0’,
pid int(11) DEFAULT NULL,
cityname varchar(255) CHARACTER SET utf8 DEFAULT NULL,
type int(11) DEFAULT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
文章浏览阅读2.9k次。Windows安装Hadoop_java.lang.unsatisfiedlinkerror: org.apache.hadoop.io.nativeio.nativeio$windo
文章浏览阅读963次。/tmp/ccvTv2zi.o: In function `av_make_error_string':encode_video.c:(.text+0x24): undefined reference to `av_strerror'/tmp/ccvTv2zi.o: In function `encode':encode_video.c:(.text+0x79): undefined reference to `avcodec_send_frame'encode_video.c:(.text+0xc_makefile 使用ffmpeg -l
文章浏览阅读4.8k次。创建tag$ git tag -a v0.1.0 -m “release 0.1.0 version”解释:创建附注标签时,参数-a即annotated的缩写,指定标签类型,后附标签名。参数m指定标签说明,说明信息会保存在标签对象中。查看tag列出当前仓库的所有标签$ git tag切换tag切换标签与切换分支命令相同$ git checkout [tagname]解..._git tag 参数
文章浏览阅读215次。已经很久没有写过博客了,期间也只是断断续续的写过两三篇最近比较的烦躁,可能是因为在家里待久了把因为每天基本上没有在学习,所以感觉自己的生活过的不是很充实有时候真的感觉自己很颓废。这两天开始学习那个微信小程序,在看那个官网的开发文档,感觉还挺不错的以后有时间尽量每天都来写一篇感悟今日心得体会和学习收获的博客吧,字数不在多认清自己在进步就好。..._2018 写博客的地方
文章浏览阅读3.7k次。想要监听页面滚动是否触底,你要先搞清offsetHeight,scrollTop,scrollHeight区别,以及如何让应用,话不多说上代码????????offsetHeight: 它是包括padding、border、水平滚动条,但不包括margin的元素的高度。️:对于行内元素这个属性值一直是0,单位px,是只读元素。scrollTop:表示在有滚动条时,滚动条向下滚动的距离也就是元素顶部被遮住部分的高度即“卷”起来的高度。️:在无滚动条时scrollTop==0恒成立,单位_vue scrollheight
文章浏览阅读1w次。关于kettle 写入mysql 遇到一个问题:LOAD_TEMP - Unable to get database metadata from this database connection,报错大致如下:2021/11/26 14:05:12 - LOAD_TEMP - ERROR (version 5.3.0.0-213, build 1 from 2015-02-02_12-17-08 by buildguy) : org.pentaho.di.core.exception.KettleDa_unable to get database metadata from this database connection
文章浏览阅读1w次,点赞6次,收藏98次。一.实验介绍简介 本次课程实验中主要是通过发送qq邮件来进行的一个钓鱼邮件实验。我是通过在kali上部署好的gophish工具向自己的一个QQ邮箱发送一个简单的电子邮件来模拟操作这次实验,并且还可以通过gophish来监测收到钓鱼邮件的收件人的状态。 本次实验中使用的时kali-Linux-2021.2 -vnware-amd64,以及Windows 10 还有用到了QQ邮箱。还有部署在kali下的gophish钓鱼工具。二.gophish的安装1.下载地址:https://gi_qq邮箱结合gophish
文章浏览阅读4.5k次。196算法 一个数正读反读都一样,我们就把它叫做“回文数”。随便选一个数,不断加上把它反过来写之后得到的数,直到得出一个回文数为止。例如,所选的数是67,两步就可以得到一个回文数484: 67+76=143 143+341=484 把69变成一个回文数则需要四步: 69+96=165 165+561=726 726+627=1353_利克瑞尔数(lychrel number)指的是将该数各数位逆序翻转后形成的新数相加,并将该
文章浏览阅读700次。↑↑↑关注后"星标"Datawhale每日干货&每月组队学习,不错过Datawhale赛事KDDCup2021,数据挖掘顶会赛题比赛链接:http://..._kddcup比赛报名时间
文章浏览阅读2k次。简单的信息安全相关知识储备就可以,因为考取国家信息安全水平考试认证证书(NISP证书)前期会有培训。NISP认证分为一级和二级,证书由中国信息安全测评中心颁发的。一级的证书还是比较容易的,网上听课线上考试,二级是线上培训线下考试的,一级相对比较简单,二级相对难一些,只有考取NISP一级证书才有机会考取NISP二级。NISP与CISP无缝对接,在获得由中国信息安全测评中心颁发的NISP二级证书,...
文章浏览阅读5.9k次,点赞9次,收藏63次。一、求解目标,范围是 [1, 2],函数的图像如下所示,目的是找到该函数在这个区间的最小值。二、遗传算法(GA, Genetic Algorithm)遗传算法的步骤就是首先对个体(染色体)进行二进制编码(十进制转二进制),设置成 0 1 编码的形式,目的是后续操作方便,然后随机产生初始的种群,设定好适应度的计算函数(也就是你要优化的函数)并计算每个个体适应度,然后采用轮盘赌算法(说的高大上,其实就是把适应度进行归一化当做选择的概率)进行选择操作,之后就随机设置个体两两配对就是交叉操作,再随机_粒子群算法求x(1,2)最小值
文章浏览阅读230次。主要知识点, 修改IK分词器源码来基于mysql热更新词库 一、IK增加新词的原因 在第32小节中学习到了直接在es的词库中增加词语,来扩充自已的词库,但是这样做有以下缺点: (1)每次添加完,都要重启es才能生效,非常麻烦 (2)es是分布式的,可能有数百个节点,你不能每次都一个一个节点上面去修改 这一小节来学习让es不停机,直接在外部..._32ik