實作省市區三級下拉列錶框,並且要達到連動效果。
方法一:
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 方法的時候需要傳遞六個參數進去
前三個參數為三個下拉列表控制項的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