选择了 json 值的选择列表项

Question

I am trying to create a one that is filled with elements that I send to the view through a json result, but I have problems to indicate the seleted value which comes from the json.

Method:

        [HttpGet]
    public JsonResult GetProductJson()
    {
        var list = new List<SelectListItem>
        {
            new SelectListItem { Value = "1", Text = "Aron" },
            new SelectListItem { Value = "2", Text = "Bob" },
            new SelectListItem { Value = "3", Text = "Charlie", Selected = true},
            new SelectListItem { Value = "4", Text = "David" }
        };

        return Json(list, JsonRequestBehavior.AllowGet);
    }

View:

        <select id="MyList"></select>

    <script>
        fetch("@Url.Content("~/Home/GetProductJson")")
            .then(function(result) {
                if (result.ok) {
                    return result.json();
                }
            })
            .then(function(data) {
                console.log(data);
                $('#MyList').empty();
                $.each(data,function(i,value){
                    $('#MyList').append($('<option/>')
                        .val(value.Value)
                        .text(value.Text)
                        //.selected(value.Selected) == true ? 'Selected': ''
                           )
                })
                });
    </script>

Answer 1

Just change your code to:

$.each(data,function(i,value){
                    $('#MyList').append($('<option/>')
                        .val(value.value)
                        .text(value.text)
                        .attr("selected", value.selected)
                           )
                })