首页 > web前端 > js教程 > 正文

省市区三级联动下拉框菜单javascript版_javascript技巧

WBOY
发布: 2016-05-16 15:45:49
原创
1518 人浏览过

实现省市区三级下拉列表框,并且要实现联动效果。

方法一:

1.视图代码

<select class="prov" id="prov5" name="Province" data-code="@Model.Province">
</select>
<select class="city" id="city5" name="City" data-code="@Model.City">
</select>
<select class="dist" id="area5" name="Area" data-code="@Model.Area">
</select>
@Html.HiddenFor(m => m.Province)
@Html.HiddenFor(m => m.City)
@Html.HiddenFor(m => m.Area)
登录后复制

2.JS调用

<script type="text/javascript">
var selectVa2 = new CitySelect({
data: data,
provId: "#prov5",
cityId: '#city5',
areaId: '#area5',
isSelect: true
});
</script>
登录后复制

3.引入的js

<script src="@Url.Content("~/Themes/Admin/JS/jquery-1.4.4.min.js")" type="text/javascript"></script>

<script src="@Url.Content("/Themes/Admin/JS/city2.js")" type="text/javascript"></script>
<script src="@Url.Content("/Themes/Admin/JS/citySelect2.js")" type="text/javascript"></script>
登录后复制

4.js插件下载地址

js插件下载地址:http://files.cnblogs.com/files/weishuanbao/%E7%9C%81%E5%B8%82%E5%8C%BA.rar

方法二:

实现效果根据选择省份,选择对应城市。

以下是HTML代码

<html> 
<body> 
<label for="select_city">城市</label> 
 
<div data-role="controlgroup" id="select_p_c_a" data-ajax="false"> 
 <select id="select_province"></select> 
 <select id="select_city"></select> 
 <select id="select_area"></select> 
</div> 
<script src="test.js"></script> 
</body> 
</html> 
 
<script> 
 region_init("select_province","select_city","select_area"); 
</script> 
</body> 
</html> 
登录后复制

下面是js代码,代码比较长,主要是里面有一个完整的中国省市区的枚举参数。大家也可以使用的。主要来说要实现自定义默认值的话,在调用我的region_init 方法的时候需要传递六个参数进去

复制代码 代码如下:

var region_init = function(_region_p, _region_c, _region_d, _region_p_default, _region_c_default, _region_d_default){……}

前三个参数为三个下拉列表控件的ID,后三个参数可以不传值,如果不传值那么最后下拉列表的结果就是默认的每一个列表的第一个值,如果要设置默认值的话那么就需要对应这三个参数传递相应的省市区的值。对应的省市区的值,在枚举类型里面对应的有。如果还有不懂,或者枚举类型有什么问题的话,欢迎讨论吧。

以下是我的test.js代码.

//省、市、区 
var region_init = function (_region_p, _region_c, _region_d, _region_p_default, _region_c_default, _region_d_default) { 
 var region_p = document.getElementById(_region_p); 
 var region_c = document.getElementById(_region_c); 
 var region_d = document.getElementById(_region_d); 
 
 function option_items_select(cmb, value) { 
  for (var i = 0; i 
登录后复制
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板