如何使用 jquery 或 ZDEZZB9ED78E2E9E72Z 核心 mvc 从 asp.net 的下拉列表中自动 select 值？

Question

这里的方法不起作用。

这是我的cshtml：

<div class="form-group col-md-4">
  <label for="inputState">City</label>
  <select id="City" class="form-control basic" asp-for="City" 
    asp-items="@(new SelectList(ViewBag.Cities," Id","ZoneName"))"
    readonly="@(Model.IsView ? true : false)">
    <option value="0" selected>Select</option>
  </select>
</div>

Jquery

$("#CustomerName").change(function () {
  var CustomerName = $("#CustomerName").val();
  $.ajax({
    url: "../Ticket/FetchCustomerAddress",
    data: { userId: CustomerName },
    type: "Get",
    success: function (data) {
      alert(data.city);
      //debugger;
      $('#City').val(data.city);
    },
    error: function (err) {
      //console.error(err)
      //alert("Internal server error.");
    }
  })
});

我正在用城市填充列表。 我想自动 select 从data.city获取列表中的城市

Answer 1

ASP 为您在客户端的输入生成新的 ID，

所以你 select html 看起来像

<select ID="City" class="form-control basic" asp-for="City" asp-items="@(new SelectList(ViewBag.Cities,"Id","ZoneName"))" readonly="@(Model.IsView ? true : false)">
     <option value="0" selected>Select</option>
</select>

为此生成的 id 是： City.ClientID ，所以为了访问这个选定的，你的 js 代码应该看起来像

...
success: function (data) {
                        
  alert(data.city);
  //debugger;
  $("#<%=City.ClientID%>").val(data.city);

},
...

注意$("#<%=City.ClientID%>") -->是新生成的 id 将在选择器中打印

Answer 2

你可以试试这个

 $("#City option[value=data.city]").attr('selected', 'selected');

Answer 3

$('#City').val(data.city); 是为下拉列表设置选定值的正确方法。

对于这个构造函数： new SelectList(ViewBag.Cities,"Id","ZoneName")) ，第一个参数是源，第二个参数是select中的每个选项值，第三个参数是html中每个选项显示的文本。

也就是说， Id代表选项值， ZoneName代表选项文本。

当您设置 select 的值时，您需要确保data.city值等于Id的任何值。

测试代码：

Model：

public class Test
{
    public string City { get; set; }
}
public class City
{
    public int Id { get; set; }
    public string ZoneName { get; set; }
}

查看（索引.cshtml）：

@model Test
<select id="CustomerName">
    <option>custom1</option>
    <option>custom2</option>
    <option>custom3</option>
</select>
<div class="form-group col-md-4">
    <label for="inputState">City</label>
    <select id="City" class="form-control basic" asp-for="City"
            asp-items="@(new SelectList(ViewBag.Cities,"Id","ZoneName"))">
        <option value="0" selected>Select</option>
    </select>
</div>
@section Scripts
{
<script>
    $("#CustomerName").change(function () {
        var CustomerName = $("#CustomerName").val();

        $.ajax({
            url: "/Home/FetchCustomerAddress",
            data: { userId: CustomerName  },
            type: "Get",
            success: function (data) {
                alert(data.city);    
                $('#City').val(data.city);
            },
            error: function (err) {
                //console.error(err)
                //alert("Internal server error.");
            }
        })
    });
</script>
}

Controller：

public IActionResult Index()
{
    ViewBag.Cities = new List<City>()
    {
        new City(){Id=1,ZoneName="aa"},
        new City(){Id=2,ZoneName="bb"},
        new City(){Id=3,ZoneName="cc"}
    };
    return View();
}

public IActionResult FetchCustomerAddress(string userId)
{
    //do your stuff...
    return Json(new Test() { City = "2" });
}

渲染视图：

Ajax 响应数据（在浏览器中按F12 -> 单击Network面板 -> 选择FetchCustomerAddress方法名称 -> 选择Response ）