分类分类
2015-08-11 15:35作者：yezheng
实现省市区三级下拉列表框，并且要实现联动效果。
方法一：
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>
方法二：
实现效果根据选择省份，选择对应城市。
以下是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代码.
相关