JQuery 비동기 로딩 무한 드롭다운 상자 계단식 함수 구현 example_jquery

코드 복사 코드는 다음과 같습니다.

/* <br>JQuery는 무한 드롭다운 상자 캐스케이드 함수 <br>zjy <br>*/ <br>(function ($) { <br>를 비동기적으로 로드합니다. $.ajaxSetup( { async: false }); <br>var url = ""; <br>var 매개변수 = ""; <br>$.fn.extend({ <br>로드: 함수(urlPath) 🎜>url = urlPath.url; <br>parameter = urlPath.parameter; <br>$("#ddl1").append("<option value="0" selected>선택하세요 option>" ); <br>$.getJSON(url, 매개변수, 함수(데이터) { <br>$.each(data.rows, 함수(i, 행) { <br>$("#ddl1"). Append($ ("</option><option></option>").val(row.id).html(row.text)) <br>}); (function ( ) { $(this).Select($(this).val(), this); }) <br>$(this).Selected(parameter.parentId, $(" #ddl1" )); <br>}, <br><br>선택: function (parentId, obj) { <br>//debugger; <br>if (parentId == "0") { <br>return ; <br>} <br>parameter.parentId = parentId; <br>$.getJSON(url, 매개변수, 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("선택하세요"); <br>$.each (데이터 .rows, 함수 (i, 행) { <br>$($(".ddl")[$(".ddl").length - 1]).append($("<option>}); <br>} <br>}); <br>$(this).Selected(parentId, $ (obj ).nextAll(".ddl")); <br>}, <br><br>선택됨: 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>
</option></select>

<pre code_snippet_id="193059" snippet_file_name="blog_20140218_1_1038704" name="code" class="javascript">

호출 방법

 <br>$(function () { <br>$("#cascade").Load({ url: '@Url.Action("GetCountryArea")', 매개변수 : { "parentId": 0, "random": Math.random() } }) <br>

<div id="cascade"> <br><select id="ddl1" class="ddl">  <br></select>
</div> <br><input id="loadselect" hidden="hidden" value="1,2"><br><input id="selectvalue" hidden="숨겨짐">

>사전>
사전>