ホームページ > 記事 > ウェブフロントエンド > 都道府県と市の 3 レベル連携ドロップダウン メニュー javascript version_javascript スキル
都道府県と市の 3 レベル連携ドロップダウン メニュー javascript version_javascript スキル
- WBOYオリジナル
- 2016-05-16 15:45:491529ブラウズ
地方と都市の 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
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。