第一次使用Distpicker.js，过程中也遇到许多问题，在解决完之后，拿出来分享给大家，希望可以帮助到朋友
第一步：如果如何使用，在项目中引入Distpicker.js
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<!-- 先引入jquery ,文件路径参考自己的项目-->
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/distpicker.js"></script>
</head>
<body>
<div data-toggle="distpicker" id="distpicker" >
<select province="省" name='province' ></select>
<select city="市 " name="city" ></select>
<select district="区" name="district"></select>
</div>
</body>
<script>
$(function(){
//调用distpicker.js
$("#distpicker").distpicker();
//如何获取省市区text 和code
$('select[name=province] option:selected').attr("data-text");
$('select[name=province] option:selected').attr("data-code");
$('select[name=city] option:selected').attr("data-text");
$('select[name=city] option:selected').attr("data-code");
$('select[name=district] option:selected').attr("data-text");
$('select[name=district] option:selected').attr("data-code");
//重复时加载必须先销毁
$('#distpicker').distpicker('destroy');
$('#distpicker').distpicker({
province: '广东省', //省
city: '深圳市', //市
district: '罗湖区' //区
});
});
</script>
</html>
- 大小: 2.3 KB
分享到：
相关推荐
这个“jquery省市区三级联动插件”是为了解决一个常见的前端开发需求——实现省市区选择的联动效果。这种功能常见于用户注册、地址填写等场景，能够提供用户友好的交互体验。 首先，我们要理解什么是“三级联动”。...
**jQuery省市区城市三级联动插件详解** 在Web开发中，常常需要实现省市区三级联动效果，以便用户在填写表单时能方便地选择所在地区。这款强大的jQuery插件正为此目的而设计，它提供了简单易用的API，使得开发者能够...
HTML网页中的jQuery移动端省市区三级联动城市选择插件是一种高效且用户友好的交互设计，它在移动设备上为用户提供方便的地区选择功能。这个插件是基于HTML5、CSS3和JavaScript（特别是jQuery库）构建的，适用于各种...
【jQuery全国省市区三级联动插件】是一种基于JavaScript库jQuery实现的前端交互功能，它能够为网站提供动态的、交互式的省市区选择下拉菜单。这个插件的主要目的是简化开发者在构建网页时处理地区选择的复杂性，通过...
封装JQuery插件，中国省市区三级联动下拉菜单，省市区街道四级联动下拉菜单插件，三级插件取的值为地区编号或地区名，四级插件默认为地区编号，修改jquery.citys.js中的valueType为“name”，街道单独在代码中修改...
**jQuery省市区三级联动插件city-picker详解** 在网页开发中，经常需要实现省市区三级联动的效果，即用户选择一个省份后，相应的城市列表自动更新，再选择城市时，对应的区县列表也会随之变化。这种功能可以提升...
**jQuery省市区三级联动插件**是一种常见的前端开发技术，用于在网页上实现省、市、区（县）的联动选择效果。这种效果通常应用于地址输入、订单填写等场景，可以方便用户快速选择地理位置，提高用户体验。在...
《jQuery省市区三级联动插件：城市选择的高效解决方案》 在网页开发中，省市区三级联动是一个常见的功能，尤其在注册、地址填写等场景下不可或缺。jQuery作为一款广泛使用的JavaScript库，为开发者提供了丰富的API...
其中，“jQuery中国省市区地址三级联动插件Distpicker”是一个广泛使用的解决方案。 Distpicker插件是基于jQuery的一个轻量级组件，它能够快速地创建一个可交互的、动态更新的省市区选择器。这个插件不仅适用于...
在移动应用和网页开发中，实现用户友好...完成上述步骤后，你将得到一个功能完善的jQuery手机端城市地区选择器，实现省市区三级联动的效果。通过不断优化和调整，可以使其更加符合用户的操作习惯，提升应用的整体体验。
`distpicker`的核心功能在于实现了省市区三级联动的效果。当用户在一级菜单（省份）中选择一个选项时，二级菜单（城市）会自动更新对应省份的下拉选项；同样，当用户在二级菜单中做出选择后，三级菜单（区县）也会随...
总结，"jquery-JSON省市区街道四级联动插件"是基于jQuery实现的一种高效解决方案，它结合了JSON的数据交换优势和jQuery的便捷性，为Web开发者提供了简单易用的地址选择工具。理解其工作原理和使用方法，有助于提升...
【jQuery中国省市区城市选择三级联动插件】是一种常见的前端开发工具，主要用于在网页上实现用户选择省份、城市、区县的功能。这个插件利用了JavaScript库jQuery的强大功能，为用户提供了一个简洁、高效的交互体验。...
"jQuery弹出式下拉框省市区三级联动地区选择插件"就是为了满足这一需求而设计的。这个插件利用jQuery库的强大功能，实现了省市区三级联动的效果，即用户在选择省份后，下拉框会自动更新出对应省份的城市列表，进一步...
《强大的jQuery省市区城市三级联动插件解析》 在网页开发中，经常需要实现省市区城市选择的功能，这种功能通常涉及到三级联动的效果，即选择一个省份后，市、区会根据所选省份自动更新。jQuery作为一款轻量级的...
**Jquery 省市区县三级联动代码详解** 在网页开发中，经常需要实现省市区县的联动选择功能，这可以方便用户根据地理位置快速选择。本文将详细介绍如何使用Jquery实现这种三级联动效果，以及涉及的相关文件和数据...
在IT领域，尤其是在前端开发中，"jq省市区三级联动插件"是一个常见的需求，用于实现用户在选择地址时的便捷交互。这个插件基于jQuery（通常简称为jq），一个广泛使用的JavaScript库，用于简化HTML文档遍历、事件处理...
在前端开发中，省市区三级联动是一种常见的交互设计，它用于在用户选择省份时自动更新市和区的下拉选项，提高用户填写地址等信息的效率。本示例使用jQuery库，结合JavaScript和JSON数据格式来实现这一功能。以下是...
带select下拉选择框美化的jQuery省市区三级联动插件，网络上很多城市三级联动选择插件，但是 大部分是采用传统的select下拉框选择，本插件利用ul模拟美化select选择框，界面还是很不错的 最终选择的值会赋值到隐藏...
综上所述，`jQuery city-picker` 是一个强大且易用的省市区三级联动插件，通过简单的配置和调用就能在网页中实现高效的城市选择功能，为用户带来便捷的交互体验。无论是电商网站、物流系统还是其他需要收集地理位置...