jQuery 简单实现select二级联动

最新推荐文章于 2023-05-27 23:48:40 发布
最新推荐文章于 2023-05-27 23:48:40 发布
阅读量98 收藏 1
点赞数
文章标签： javascript xhtml ViewUI

今天在给客户做网站的时候 网站想实现使用select二级联动效果，实在是不好弄，就简单的弄了个代码，用起来挺实用的，下面是使用的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery 二级联动</title>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
       $(document).ready(function(){
           $("#province").change(function(){
               $("#province option").each(function(i,o){
                   if($(this).attr("selected"))
                   {
                       $(".city").hide();
                       $(".city").eq(i).show();
                   }
               });
           });
           $("#province").change();
       });
</script>
</head>
<body>
   <select id="province">
       <option>----请选择省份----</option>
       <option>北京</option>
       <option>上海</option>
       <option>江苏</option>
   </select>
   <select class="city">
           <option>----请选择城市----</option>
   </select>
   <select class="city">
       <option>东城</option>
       <option>西城</option>
       <option>崇文</option>
       <option>宣武</option>
       <option>朝阳</option>
   </select>  
   <select class="city">
       <option>黄浦</option>
       <option>卢湾</option>
       <option>徐汇</option>
       <option>长宁</option>
       <option>静安</option>
   </select>
   <select class="city">
       <option>南京</option>
       <option>镇江</option>
       <option>苏州</option>
       <option>南通</option>
       <option>扬州</option>
   </select>
</body>
</html>

就简单的这么几行代码就可以实现这样的功能，

weixin_34159110
关注
Jquery实现的的动态无刷新的二级联动菜单
11-26
基于jquery的用实现二级动态联动菜单，里面用到jquer+ajax+json解析方面知识，通过无刷新去后台值实现的，可用性非常好，欢迎大家下载学习。
jQuery 简但实现select二级联动
Chinaxxren
08-23 174
写道 &lt; !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; ..
jQuery 1.3.2 简单实现select二级联动
晓风揽月
08-09 439
jQuery 二级联动      $(document).ready(function(){  $("#province").change(function(){  $("#province option").each(function(i,o){  if($(this).attr("selected"))  {  $(".city").hide();  $(".city").e
jquery基于layui实现二级联动下拉选择(省份城市选择)
10-19
在本文中，我们将探讨如何使用jQuery和layui框架来实现二级联动下拉选择，特别是针对省份和城市的选择。layui是一款流行的前端UI框架，它提供了丰富的组件和API，使得开发者能够快速构建美观且响应式的Web应用。在...
js实现HTML中Select二级联动的实例
10-18
总结起来，这个JavaScript实现的HTML Select二级联动实例主要展示了如何使用JavaScript动态更新下拉列表的内容，以响应用户在另一下拉列表中的选择。通过合理的数据结构和事件监听，可以创建出高效、可维护的联动...
jQuery+JSON实现AJAX二级联动实例分析
10-23
在这篇介绍性文章中，我们详细探讨了如何使用jQuery和JSON技术实现AJAX二级联动效果。文章以实例的方式展示了前端使用jQuery框架发送AJAX请求，并且在后端通过C#编写的WebHandler处理数据，将数据库中的信息以JSON...
基于jquery实现二级联动效果
11-29
这种二级联动的实现方式可以轻松地扩展到更多级的联动效果，只需添加更多的`<select>`元素并相应地更新JavaScript代码即可。同时，此方法也可以应用于其他需要根据一级选项动态改变二级选项的场景。
jquery实现select二级联动
weixin_33845881的博客
05-12 139
jquery实现一个简单的select二级联动菜单，代码如下     1 &lt;!DOCTYPE html&gt; 2 &lt;html&gt; 3 &lt;head&gt; 4 &lt;meta charset="utf-8"&gt; 5 &lt;title&gt;jQuery 二级联动&lt;/title&gt; 6 &lt
利用JQuery制作简单二级联动
03-16
doubleselect.html 博文链接：https://crazymud.iteye.com/blog/413122
jquery select二级联动菜单
02-07
该小插件是自己写的谢谢指教。可以改写为三级菜单。
Jquery实现下拉框、多级联动
11-08
jquery实现的多级联动下拉框，由div标签加上span标签实现。
基于jQuery的二级联动<select>
gundumw100的专栏
09-14 133
[code="java"] $(document).ready(function(){ send();//初始化 $("#categoryFirst").change(send); }); 办公费用 租赁费 物业水电费 社会保险费 交通费 详细类别： ...
基于jQuery下拉两级联动select
woweipingzui的专栏
01-25 1594
之前参照那篇博客弄的忘记了，记录下: js代码： $(function() { $.ms_DatePicker({ YearSelector : ".sel_year", MonthSelector : ".sel_month", DaySelector : ".sel_day" }); $.ms_DatePicker(); }); (function($) { $.
基于jQuery的二级联动<select>
gundumw100的专栏
04-10 427
$(document).ready(function(){ send();//初始化 $("#categoryFirst").change(send); }); 办公费用 租赁费 物业水电费 社会保险费 交通费 详细类别： function sen
如何使用JQuery实现Js二级联动和三级联动
最新发布
是个非常热爱生活、乐观、奋斗、努力的逗比青年
05-27 2248
好了，以上代码就是使用JQuery库来实现的上面的二级三级联动，希望多多支持！
Jquery-select-处理二级联动的一种简单方式
热门推荐
Bear
09-23 1万+
Jquery-select-处理二级联动的一种简单方式问题背景： 页面中有很多级联数据时，处理起来很麻烦。比如我们需要处理一个城市的二级联动， 先选择省，然后选择市。思考一下我们数据的字典的建立。 说一种一般的处理方式 比如广东省-深圳市，数据库一般就会有两条数据。 但是我们使用select组件的时候 一般会用到下面的处理 <select id="deptselec
jQuery与Ajax实现的二级联动示例及PHP配合应用
二级联动（1）：基于jQuery的简单实现 此案例利用jQuery库实现了基于事件驱动的二级联动。首先，在HTML部分，我们有两层下拉菜单，一个用于选择省份（`<select id="province">`），另一个用于展示对应的城市（`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值