jQuery 简单实现无刷新select二级联动

最新推荐文章于 2022-11-15 10:26:50 发布
最新推荐文章于 2022-11-15 10:26:50 发布
阅读量1.2k 收藏
点赞数
分类专栏： javascript 文章标签： jquery jQuery JQUERY Jquery JQuery select二级联动

演示地址：http://wlog.cn/code/jquery/liandong/demo.html

<!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="http://wlog.cn/lib/jquery/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" name="beijing">
       <option>东城</option>
       <option>西城</option>
       <option>崇文</option>
       <option>宣武</option>
       <option>朝阳</option>
   </select>  
   <select class="city" name="shanghai">
       <option>黄浦</option>
       <option>卢湾</option>
       <option>徐汇</option>
       <option>长宁</option>
       <option>静安</option>
   </select>
   <select class="city" name="jiangsu">
       <option>南京</option>
       <option>镇江</option>
       <option>苏州</option>
       <option>南通</option>
       <option>扬州</option>
   </select>
</body>
</html>
原文地址：http://wlog.cn/javascript/jquery-select.html
huoshi5151
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
更改select标签实现无刷新动态取值
分享
04-21 1406
/*  *动态选择JS代码  */ function getProduct(){ var pruductNo=$("#productsNo option:selected").text(); //获取select标签中选择的值 $.getJSON('/order/OrderController/getProductByNo?product='+pruductNo, function(
Jquery实现的的动态无刷新的二级联动菜单
11-26
在本示例中，我们探讨的是如何利用jQuery实现一个无刷新的二级联动菜单，这涉及到jQuery库、AJAX异步请求以及JSON数据解析等多个关键知识点。 首先，jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理...
使用select2插件做联动查询
花飘万家雪
09-06 1万+
最近跟的一个项目整体的架构采用的是win 8(metro)风格，里面用到了很多插件，其中有一个select2.js(官网：http://ivaynberg.github.io/select2)，这个插件的功能非常强大，我只用到了其中的一个——联动查询。 一、页面部分 二、js部分 $(document).ready(function({ $("#as_num").select2(
Jquery实现二级下拉选择框
weixin_50813407的博客
11-15 784
【代码】Jquery实现二级下拉选择框。
MVC Jquery 实现多个select 无刷新联动
生如夏花之灿烂！
02-15 6555
直接上案例代码： View  ： $("#select1").change(function () { var no = $("#no").val(); var name = $("#select1").val(); $.ajax({ type: "POST",//提交
jQuery+php+mysql,轻松实现ajax无刷新省市二级联动
Jane8155的博客
12-22 133
用jQuery的ajax方法,结合PHP,轻松实现省市级的二级联动: 新建area.php 1 <? 2 $dbc=mysqli_connect("localhost","xxxx","xxxxxxxxxx","test") or die("can not connect to mysql ".mysqli_error()); 3 mysqli_query($d...
jquery 无刷新二级联动
09-08
以下是一个简单的jQuery实现无刷新二级联动的步骤： 1. **HTML结构**：创建两个下拉列表，一个作为一级分类，另一个作为二级分类。 ```html <select id="category1"> 请选择 <!-- 这里填充一级分类的数据 --> </...
jQuery+JSON实现AJAX二级联动实例分析
11-23
在本文中，我们将深入探讨如何使用jQuery和JSON通过AJAX技术实现二级联动效果。这个功能常见于各种Web应用，如地址选择、分类筛选等，它允许用户在一个下拉列表的选择基础上动态更新另一个下拉列表的内容。 首先，...
Query实现的<select>动态二级联动菜单
11-26
本文将详细讲解如何利用jQuery、Ajax和JSON来实现一个无刷新的动态二级联动菜单，该功能基于`<select>`元素，提供优秀的用户体验。 首先，我们需要了解jQuery库，它是一个强大的JavaScript库，简化了DOM操作、事件...
基于jQuery+JSON的省市二三级联动效果
12-11
本文将讲述，利用jQuery插件，通过读取JSON数据，实现无刷新动态下拉省市二（三）级联动效果。 HTML 首先在head中载入jquery库和cityselect插件。 [removed][removed] [removed][removed] 接下来，我们在#city中...
jQuery实现select级联
weixin_34395205的博客
09-11 129
使用Html5的数据属性(data-*)Map级联关系，代码如下： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Select级联</title> 5 <script src="https://code.jquery.com/jquery-1.1...
jquery multiselect动态加option，调用refresh方法才能刷新option
qiuhx909922的专栏
04-13 4054
$("#sela").append("option1"); $("#sela").multiselect("refresh"); //一定要调用refresh方法才能刷新
Javascript 实现无刷新联动菜单（select）的方法
yn098的专栏
05-11 621
摘要: 所谓联动菜单，就是后一个下拉框的选项是根据前一个下拉框被选中的值来决定的，一个典型的应用就是省市联动菜单了，市的下拉选项是根据你选了哪个省来决定的，类似的需求我们经常遇到，相信许多新手都被这个问题困扰过。其实，联动菜单的实现原理非常简单，本文详细介绍了联动菜单的实现方式，知道了原理，我们可以很容易地制作从XML、数据库加载的无限级联动菜单。  所谓联动菜单，就是后一个下拉框的选
jquery实现select三级联动（简单易懂）
热门推荐
yanchenxi313761的博客
03-28 3万+
       尽可能每一步都做到详细，算是一个知识的回顾，有不足之处，希望大家多提意见        该例子实现的是省市县三级联动。        实现原理：    省、市、县，每个下拉框数据都由一个数组组成；光累文字肯定是不行的，直接上代码了。        先确定HTML部分：&lt;select name="" id="selProvince"&gt; &lt;option valu...
利用XMLHTTP实现的二级连动Select（转）
weixin_34234823的博客
12-28 90
传统二级连动是把所有的数据都传到有客户端..利用XMLHTTP.我们可以实时地返回我们所需要的数据. select.htm &lt;script language="JavaScript"&gt;function GetResult(str){/**--------------- GetResult(str) -----------------* GetResult(str) * 功能:通过XM...
jquery ajax实现二级联动
qq_38409944的博客
08-02 3166
前言： 还记得昨天看某位大佬的博客，看到了ajax实现二级联动，不由心痒痒也想实现一番，先贴上：链接：大佬的这篇博客 学习过程： 1. 于是我就去补了ajax，可是发现不行啊， https://blog.csdn.net/qq_38409944/article/details/81325662 2. 可是我只学过xml，ajax的数据传输主要是json，于是乎我又补了json，可是又...
jquery简单实现二级联动
最新发布
11-24
以下是一个简单的jQuery实现二级联动的例子： HTML代码： ```html <select id="province"> <option value="">请选择省份</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="广东">广东</option> </select> <select id="city"> <option value="">请选择城市</option> </select> ``` jQuery代码： ```javascript $(function(){ // 省份下拉框改变事件 $('#province').change(function(){ var province = $(this).val(); // 根据省份获取城市列表 $.ajax({ url: 'getCity.php', type: 'post', data: {province: province}, dataType: 'json', success: function(data){ // 清空城市下拉框 $('#city').empty(); // 添加城市选项 $.each(data, function(index, city){ $('#city').append('<option value="'+city+'">'+city+'</option>'); }); } }); }); }); ``` 说明： 1. HTML代码中有两个下拉框，一个是省份下拉框，一个是城市下拉框。 2. jQuery代码中，使用change事件监听省份下拉框的改变，获取选中的省份值。 3. 使用ajax向服务器发送请求，根据省份获取城市列表。 4. 在ajax的success回调函数中，清空城市下拉框，并添加城市选项。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值