jquery 或 javascript 中有没有一种方法可以在不使用 ajax 请求的情况下在页面加载时填充下拉列表？

Posted 2023-04-13

【中文标题】jquery 或 javascript 中有没有一种方法可以在不使用 ajax 请求的情况下在页面加载时填充下拉列表？

【英文标题】：Is there a way in jquery or javascript to populate dropdown lists on page load without using an ajax request?

【发布时间】：2019-07-02 13:43:24

【问题描述】：

我想在页面加载时使用 jQuery 填充一些下拉列表，而不是使用 ajax 来响应我目前正在使用的事件。 我的控制器为这些下拉列表构建了几个 List 对象。 目前我使用 ajax 并且我的操作会返回数据，但这需要在渲染时出现在我的视图中。

C#代码：

    return Json(ddlVals1, JsonRequestBehavior.AllowGet)

    return Json(ddlValAnother, JsonRequestBehavior.AllowGet)

我希望在我的 jQuery 代码中执行的示例；

$(function ()

    LoadUserDropDown();
    LoadAnotherDropDown();
);

谢谢。

【参考方案1】：

只要您将列表值传递给查看即可。例如，您可以使用 ViewBag 将临时数据传输到 View。

// Action
public ActionResult Index()

    ViewBag.FirstDropDownList = new List<string>()  "Item 1", "Item 2" ;
    ViewBag.FirstDropDownListJson = new System.Web.Script.Serialization.javascriptSerializer().Serialize(ViewBag.FirstDropDownList);
    return View("Index");


// View using razor
<select>
@foreach(var item in ViewBag.FirstDropDownList) 

    <option value="@item">@item</option>

</select>

// View using jQuery
<select id="dropdown1"></select>
<script>
    $(function()
        var dropdown1List = JSON.parse('@html.Raw(ViewBag.FirstDropDownListJson)');
        $('#dropdown1').html($.map(dropdown1List, a => `<option value="$a">$a</option>`));
    );
</script>