首頁 > web前端 > js教程 > JQuery異步載入無限下拉框級聯功能實作範例_jquery

JQuery異步載入無限下拉框級聯功能實作範例_jquery

WBOY
發布: 2016-05-16 16:59:12
原創
1154 人瀏覽過
複製代碼


代碼如下:


/* <br>JQuery非同步載入無限極下拉框級聯功能<br>zjy <br>*/ <br>(function ($) { <br>$.ajaxSetup({ async : false }); <br>var url = ""; <br>var parameter = ""; <br>$.fn.extend({ <br>Load: function (urlPath) { <br>url = urlPath. url; <br>parameter = urlPath.parameter; <br>$("#ddl1").append("<option value="0" selected>請選擇</option>"); <br> $.getJSON(url, parameter, function (data) { <br>$.each(data.rows, function (i, row) { <br>$("#ddl1").append($("<option> </option>").val(row.id).html(row.text)); <br>}); <br>$("#ddl1").change(function () { $(this). Select($(this).val(), this); }); <br>}); <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, parameter, function (data) { <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")); <br><br>$($(".ddl")[$(".ddl"). length - 1]).append("<option value="0" selected>請選擇</option>"); <br>$.each(data.rows, function (i, row) { <br>$($(".ddl")[$(".ddl").length - 1]).append($("<option></option>").val(row.id).html( row.text)); <br>}); <br>} <br>}); <br>$(this).Selected(parentId, $(obj).nextAll(".ddl")); <br>}, <br><br>Selected: function (parentId, obj) { <br>$(this).GetValue(); <br>//debugger; <br>var selected = "0," $(" #loadselect").val(); <br>$.each(selected.split(","), function (i, row) { <br>if (row == parentId) { <br>//debugger; <br>$(obj).val(selected.split(",")[i 1]); <br>$(obj).change(); <br>} <br>}); <br>} , <br><br>GetValue: function () { <br>var ddlValue; <br>var ddlCount = $(".ddl").length; <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>break; <br>} <br>} else { <br>if ($($(".ddl")[i] ).val() == 0) { <br>ddlValue = 0; <br>break; <br>} else { <br>ddlValue = $($(".ddl")[i]).val() ; <br>break; <br>} <br>} <br>} <br>$("#selectvalue").val(ddlValue); <br>}, <br>}); <br>}) (jQuery); <br></select>
登入後複製
登入後複製
登入後複製
登入後複製
呼叫方法
登入後複製
<script type="text/javascript"> <BR>$(function () { <BR>$("#cascade").Load({ url: '@Url.Action("GetCountryArea")', parameter: { "parentId": 0, "random": Math.random() } }); <BR>}); <BR></script><br> <br><pre code_snippet_id="193059" snippet_file_name="blog_20140218_5_843717" name="code" class="html"><div id="cascade"> <br><select id="code" class="html"><div id="cascade"> <br><select id="divll1" class="ddl"></select> <br>
</div> <br><input id="loadselect" hidden="hidden" value="1,2"> <br><input id="selectvalue " hidden="hidden"><br> <br><br> <br><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製

登入後複製
登入後複製
登入後複製
登入後複製
登入後複製

登入後複製
登入後複製
登入後複製
登入後複製
登入後複製

登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
相關標籤:
來源:php.cn
上一篇:js確認刪除對話框效果的範例程式碼_javascript技巧 下一篇:多種方法實作load載入完成後把圖片一次顯示出來_javascript技巧
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
相關專題
更多>
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板