都道府県と市の 3 レベル連携ドロップダウンメニュー javascript version

都道府県と市の 3 レベル連携ドロップダウンメニュー javascript version_javascript スキル

WBOY

リリース： 2016-05-16 15:45:49

オリジナル

1518 人が閲覧しました

地方と都市の 3 レベルのドロップダウンリストボックスを実現し、連携効果を実現します。

方法 1:

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/weishanbao/province and city.rar

方法 2:

効果は選択した州と対応する都市に基づいて達成されます。

以下は 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 メソッド

を呼び出すときに 6 つのパラメーターを渡す必要があります。

コードをコピーしますコードは次のとおりです:

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

最初の 3 つのパラメータは 3 つのドロップダウンリストコントロールの ID です。値を渡さない場合、最後の 3 つのパラメータはデフォルトになります。各リストの最初の値を設定する場合は、デフォルト値を使用する場合、これらの 3 つのパラメータに対応する、対応する州と都市の値を渡す必要があります。州と都市の対応する値は列挙型で見つかります。それでもわからない場合や列挙型で問題がある場合はお気軽にご相談ください。

以下は私の test.js コードです。

//省、市、区 
varregion_init = function (_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, value) { 
  for (var i = 0; i

ログイン後にコピー