一个jQuery二级联动的例子

最新推荐文章于 2021-04-18 08:45:03 发布
最新推荐文章于 2021-04-18 08:45:03 发布
阅读量491 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuluoqianmu/article/details/40475543
版权
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test01.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
  </head>
  <body>
     <select id="province" name="province">
       <option value="">请选择....</option>
     </select>
<select id="city" name="city">
<option value="">请选择.....</option>
<option value="铁岭">铁岭</option>
</select>
  </body> 
<script language="JavaScript">
$.get("cities.xml",function(xml){
var docXml = xml;
var $provinceXmlElements = $(docXml).find("province");
$provinceXmlElements.each(function(index,domEle){
var $provinceXmlValue = $(domEle).attr("name");

var $option = $("<option></option>");
$option.attr("value",$provinceXmlValue);
$option.text($provinceXmlValue);


var $provinceElement = $("#province");
$provinceElement.append($option);

});

$("#province").change(function(){
var $provinceValue  = $("#province").val();
//$("#city option[value!='']").each(function(index,domEle){
// $(domEle).remove();
//});
$("#city option[value!='']").remove();

$provinceXmlElements.each(function(index,domEle){
var $provinceXmlValue = $(domEle).attr("name");

if($provinceValue==$provinceXmlValue){
var $cityXmlElements = $(domEle).find("city");

$cityXmlElements.each(function(index,domEle){
var $cityXmlValue = $(domEle).text();

var $option = $("<option></option>");
$option.attr("value",$cityXmlValue);
$option.text($cityXmlValue);

var $cityElement = $("#city");
$cityElement.append($option);
});
}
});
});
})

</script>

</html>




对应的XML文件：

<?xml version="1.0" encoding="GB2312"?>
<china>
<province name="吉林省">
<city>长春</city>
<city>吉林市</city>
<city>四平</city>
<city>松原</city>
<city>通化</city>
</province>
<province name="辽宁省">
<city>沈阳</city>
<city>大连</city>
<city>鞍山</city>
<city>抚顺</city>
<city>铁岭</city>
</province>
<province name="山东省">
<city>济南</city>
<city>青岛</city>
<city>威海</city>
<city>烟台</city>
<city>潍坊</city>
</province>
</china>

雨落千木
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
二级联动demo
09-28
用JQuery和select 做的一个 二级 下拉 联动 思路 就是 点击 第一个 下拉框时 调取 change事件 获取 第二个下拉框的值 实现 联动 效果
JQuery实现动态绑定和二级联动
10-18
JQuery实现动态绑定DropDownList和二级联动
jquery ajax实现省市二级联动
07-11
该资源包含了一个使用jquery ajax实现的省市二级联动的简单demo，简单易懂，可以参考博客：http://blog.csdn.net/mockingbirds/article/details/46842327
超简单JS二级、多级联动的简单实例
12-10
超简单的JS联动代码，不过要配合jquery用,也可以自己修改为不用任选JS库的代码 代码如下:<tr>  <th>一级分类</th><td>    <select name=”subsidiary_cat_id” class=”subsidiary_cat_id” onchange=”linkage(‘.subsidiary_cat_id’,’.cat_id’);”>      <option>请选择</option>    </select>    [removed]    var linkage_data={$list_file_category
代码收集_jQuery省份城市菜单二级下拉列表联动功能
dsy960111的博客
12-06 3260
;(function ($) {     $.fn.selectCity = function (options)      {         var defaults = {             province : '' , //省份对象             city : '' , //城市对象             callback : function(cityAr
jQuery二级联动城市选择特效代码
03-20
总之，jQuery二级联动城市选择是一种常见的前端交互功能，通过结合HTML、CSS和JavaScript，尤其是jQuery的强大功能，可以轻松实现。通过理解和实践这个功能，开发者可以提升网站的用户体验，特别是对于有地域性需求...
基于jquery实现二级联动效果
10-20
总结起来，这个例子展示了如何利用jQuery实现二级联动效果，通过监听选择事件，动态控制子级选择框的显示和隐藏，从而提供用户友好的交互体验。这个技术在网页表单设计中非常常见，能够提高用户体验，减少用户操作...
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
10-18
二级联动通常指的是一个下拉框的选择会影响另一个下拉框的内容，例如在选择省份后，城市下拉框会自动更新为相应省份的城市。 首先，我们需要创建数据库结构。在这个例子中，我们有两张表：`province`（省份表）和`...
jQuery四级联动菜单特效代码
03-20
"jQuery四级联动菜单特效代码"是一个利用jQuery实现的多级联动下拉框菜单，它能为用户带来更加直观和便捷的导航体验，尤其适用于层级结构丰富的网站或应用。 该特效的核心在于级联选择，即当用户在一级菜单中选择一...
利用JQuery制作简单二级联动
来时的路
06-22 228
刚开始学jquery,试着用jquery做了一个小例子：省市的二级联动。   在数据库test中建表province和city。province有字段id和name。city表中字段是id,city_name和province_id。   view部分代码如下：   &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional...
JQuery应用案例--JQuery-MySql版：城市省份区域-三级联动
君醉酒的博客
09-06 4293
原：AJAX应用案例--基于mysql，以POST方式，完成三级级下拉联动【省份-城市-区域】 现改为JQuery版的三级联动，只需改动JSP页面代码，使用JQuery使得代码大大简化。 代码： 请选择省份 广东 湖南 请选择城市 请选择区域 $("
day48 二级联动
gaosong0623的博客
11-14 116
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select id="province" onchange="fuc1(th...
Jquery实现多行的二级联动
syb18810107241的专栏
10-23 906
首先，写一个简单的只有一行的例子（以前写的） 第一步：搭建Struts2开发环境，并导入Mysql的驱动包以及JSon使用到的jar包(所有) 第二步：搭建DBUtils环境（以C3P0作为连接池） 第三步：准备用于测试的数据库表和记录 # # Source for table "t_province" # DROP TABLE IF EXISTS `t_province
二级联动实例
xmy_wh的博客
06-13 400
// 二级联动 $(document).ready(function () { var varurl = '/ivr/getIvrList.action'; $.getJSON(varurl, function (data) { //对请求返回的JSON格式进行分解加载 $(data.rows).each(function () {
二级联动效果开发实例
小小喵的博客
08-16 1012
先看下效果图 类似这种效果如何开发下面进行讲解 注：这里做的不是组件封装，是以业务角度进行的代码开发 html &amp;lt;div v-transfer-dom&amp;gt; &amp;lt;popup v-model=&quot;state.timeFlag&quot; :hide-on-blur=&quot;false&quot; position=&quot;bottom&quot; cl
二级联动小案例
小白小白从不日别的博客
04-18 163
1.原理： 点击相应的省则会对应的自动选择到相关的市 2.涉及的核心知识点： 1.select元素的option创建方式 [var option=new Option(‘显示的内容’);] 2.select元素添加option元素 [select.options.add(新建的option);] 3.select元素清空option的方式：[select.options.length=0;] 4.select元素改变时触发的事件：[select.οnchange=function(){}] 5.s
JS简单案例（2）：实现二级联动
崔昕阳的博客
05-13 2663
JS案例： 1.实现二级联动 创建一个页面，有两个下拉选择框： (1) 在第一个下拉框里面有一个事件 ：改变事件 onchange事件 (2)方法change1(this.value);表示当前改变的option里面的value值 (3) 创建一个二维数组，存储数据 (4)每个数组中第一个元素是国家名称，后面的元素是国家里面的城市 2.步骤 (1)遍历二维数组 (2)得到也是一个...
利用js实现二级联动的简单实例
c_staunch的博客
04-14 5053
此实例是一个简单的二级联动，第一个列表中的值为固定的，第二个列表中的值随着第一个列表值的变化而变化，即第一个列表影响第二个列表。实现思路：先写两个&lt;select&gt;标签，用name或id来区分；写一个二维数组来存放信息；在一级菜单中使用onchange()事件来动态加载二级菜单的内容。完整代码&lt;html&gt; &lt;head&gt; &lt;meta charset="U...
超简单JS二级、多级联动
emtit2008的专栏
01-30 813
超简单的JS联动代码，不过要配合jquery用,也可以自己修改为不用任选JS库的代码 一级分类 请选择 var linkage_data={$list_file_category};//初始化级联数据，{$list_file_category}是PHP的JSON_ENCODE的数据，数组有3个数据，id,parent_id,name f
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值