Jquery 某效果展示

最新推荐文章于 2025-03-13 15:43:46 发布

原创最新推荐文章于 2025-03-13 15:43:46 发布 · 438 阅读

0 ·

CC 4.0 BY-SA版权

网络技术专栏收录该内容

115 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态加载下拉菜单选项的方法。通过Ajax获取后台数据，并利用jQuery操作DOM来更新HTML内容，实现了根据不同条件显示相应选项的功能。

<div id="connect">
</div>

function getxx() {
            var stype = $("#hitype").val();
            var scategory = $("#Category").val();
            var parentId = $("#optionreasontype").val();
            if (parentId == "0") {
                $("#highreasontype").html("<option value=\"0\">请选择</option>");
            }
            else {
                var url = window.SecondCatlog + "/XXXReason/GetXXXXXTypeDDList";
                $.getJSON(url, {
                    category: scategory,
                    type: stype,
                    parentId: parentId
                }, function (result) {
                    var str = "";
                    if (result != null) {
                        var t = 0
                        $.each(result, function (k, v) {                     
                            if (t == 0) {
                                str = "<table class=\"connectReason\" style=\"width:100%\"><tr><td colspan=\"4\" style=\"text-align:center;color:green\"><span class=\"chkTransform\"><input type=\"checkbox\" value=\"true\"\ onclick=\"CheckedAllClick()\" id=\"checkAll\" \">全选</span></td></tr><tr>";
                            }
                            t++;
                            if ((t-1)% 4 == 0) {
                                str += "</tr><tr>";
                            }

                            str += "<td style=\"width:25%\"><span class=\"chkTransform\"><input type=\"checkbox\" value=\"" + v.Id + " \" id=\" " + v.Id + " \" name=\"secondreasonname\" \>" + v.ReasonName + "</span></td>";

                        });
                        str += "</tr></table>"
                    }
                    $("#connect").html(str);
                    var item = $("#second").val();
                    $("#highreasontype").val(item);
                    if (item != 0) {
                        $("#notfirst").attr("checked", "checked");
                        $(".orehighreason").show();
                    }
                })
            }
        }