ホームページ > ウェブフロントエンド > jsチュートリアル > JQuery 非同期読み込み無限ドロップダウン ボックス カスケード関数の実装 example_jquery

JQuery 非同期読み込み無限ドロップダウン ボックス カスケード関数の実装 example_jquery

WBOY
リリース: 2016-05-16 16:59:12
オリジナル
1149 人が閲覧しました
コードをコピーします コードは次のとおりです:

/* <br>JQuery は無限ドロップダウン ボックス カスケード関数 <br>zjy <br>*/ <br>(function ($) { <br> $.ajaxSetup( { async: false }); <br>var url = ""; <br>$.fn.extend({ <br>Load: function (urlPath) 🎜>url = urlPath.url; <br>parameter = urlPath.parameter; <br>$("#ddl1").append("<option value='0'selected='selected'>選択してください</ option>" ); <br>$.getJSON(url, パラメータ, function (data) { <br>$.each(data.rows, function (i, row) { <br>$("#ddl1"). append($ ("<option>").val(row.id).html(row.text)) <br>}); (関数 ( ) { $(this).Select($(this).val(), this); }); <br>$(this).Selected(parameter.parentId, $(" #ddl1" )); <br>}, <br><br>Select: function (parentId, obj) { <br>//debugger; <br>if (parentId == "0") { <br>return ; <br>} <br>parameter.parentId =parentId; <br>$.getJSON(url, パラメータ, 関数 (データ) { <br>$(obj).nextAll(".ddl").remove(); <br> if (data != null) { <br>$("<select>", { <BR>"class": "ddl", <BR>change: function () { <BR>$(this ).Select ($(this).val(), this); <BR>} <BR>}).appendTo($("#cascade")); ")[ $(".ddl").length - 1]).append("<option value='0' selected='selected'>選択してください</option>"); <br>$.each (data .rows, function (i, row) { <br>$($(".ddl")[$(".ddl").length - 1]).append($("<option>< /option&gt ;").val(row.id).html(row.text)); <BR>}); <BR>} <br>}); <br>$(this).Selected(parentId, $ (obj ).nextAll(".ddl")); <BR>}, <BR><BR>選択済み: function (parentId, obj) { <BR>$(this).GetValue();デバッガー; <BR>var selected = "0," $("#loadselect").val(); <BR>$.each(selected.split(","), function (i, row) { <BR> if ( row ==parentId) { <br>//デバッガー; <br>$(obj).val(selected.split(",")[i 1]); ; <BR>} <BR>}); <BR>}, <BR><BR>GetValue: function () { <BR>var ddlValue; <BR>var ddlCount = $(".ddl"); <BR>for (var i = ddlCount - 1; i >= 0; i--) { <BR>if (i != 0) { <BR>if ($($(".ddl")[i ]) .val() != 0) { <BR>ddlValue = $($(".ddl")[i]).val(); <br>ブレーク <br>} <BR>} else { <BR> if ($($(".ddl")[i]).val() == 0) { <BR>ddlValue = 0; <BR>} else { <BR>ddlValue = $ ($ (".ddl")[i]).val(); <BR>break; <BR>} <BR>} <BR>$("#selectvalue").val(ddlValue); <BR>}, <BR>}); <BR>})(jQuery); <BR>
<pre code_snippet_id="193059"snippet_file_name="blog_20140218_1_1038704" name="code" class="javascript">
メソッドの呼び出し
< pre code_snippet_id="193059"snippet_file_name="blog_20140218_4_4987391" name="code" class="javascript">
 &lt ; スクリプトタイプ="text/javascript"> <br>$(function () { <br>$("#cascade").Load({ url: '@Url.Action("Get CountryArea")', パラメータ: { "parentId": 0, "random": Math.random() } }); <br></script></pre<br> code_snippet_id= "193059"snippet_file_name="blog_20140218_5_843717" name="code" class="html"><div id="cascade"><br><select id="ddl1" class="ddl"> < /select> <br></div> <br><input id="loadselect" hidden="hidden" value="1,2"/> hidden= "hidden" /><br><br><br><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><pre class="brush:php;toolbar:false">

 
 🎜>  

ログイン後にコピー
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート