首頁 > 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/省市區.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 = 函數 (_region_p, _region_c, _region_d, _region_p_default, _region_c_default, _region_d_default) {
 varregion_p = document.getElementById(_region_p);
 varregion_c = document.getElementById(_region_c);
 varregion_d = document.getElementById(_region_d);
 
 函數 option_items_select(cmb, 值) {
  for (var i = 0; i 
登入後複製
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板