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

複製代碼

複製代碼

代碼如下:

/* <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">

登入後複製

登入後複製

登入後複製