javascript - 带有 json 数据并选择的 MVC 下拉列表

Question

我正在尝试使用第二个列表上的 jsonResult 数据填充下拉列表关于更改事件。效果很好。但我也想在该列表上使用选择，并且该列表为空。看起来 selected 没有获取列表更新。我对此很陌生，所以请帮忙

First list:
 <div class="col-md-10">
     @Html.DropDownList("tipopreme_TipOpremeID", null, htmlAttributes: new { @class = "form-control", @onchange = "PopuniDropOpreme()" })
 </div> 

第二个列表:

 @Html.DropDownListFor(x => x.ModelOpreme_ModelOpremeID, new SelectList(Enumerable.Empty<SelectListItem>()))

Controller :

    public JsonResult getOpremaPoTipu(int? tipid)
    {
        List<SelectListItem> lista = new List<SelectListItem>();
        if (tipid != null)
        {
            foreach (var item in db.ModelOpremes.Where(x=>x.TipOpreme_TipOpremeID==tipid))
            {
                lista.Add(new SelectListItem { Text = item.PunNaziv, Value = item.ModelOpremeID.ToString()});
            }               
        }
        else
        {
            foreach (var item in db.ModelOpremes)
            {
                lista.Add(new SelectListItem { Text = item.PunNaziv, Value = item.ModelOpremeID.ToString() });
            }
        }
        return Json(lista, JsonRequestBehavior.AllowGet);
    }

Script:

    @section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/chosen.jquery.min.js"></script>
<link href="~/Content/chosen.min.css" rel="stylesheet" />
<script type="text/javascript">
    $(".chzn-select").chosen();
    $("#ModelOpreme_ModelOpremeID").chosen(); 

    function PopuniDropOpreme() {
        var tip = $("#tipopreme_TipOpremeID").val();
        $.ajax({

            type: "GET",
            contentType: "application/json; charset=utf-8",
            url: "/Opremas/getopremapoTipu?selectedValue=" + tip,
            data: "{}",
            dataType: "Json",
            success: function (data) {
                

            
                $('.ddlProjectvalue').find('option').remove();

                  
                $(data).each(function (index, item) { 
           

                    $("#ModelOpreme_ModelOpremeID").append($('<option></option>').val(item.Value).html(item.Text));
                });
                $("ModelOpreme_ModelOpremeID").chosen("destroy").chosen();
            },
            error: function ajaxError(response) {
                alert(response.status + ' ' + response.statusText);
            }
        });
    }   
    
</script>

Answer 1

您的代码中有一些错误:

- url: "/Opremas/getopremapoTipu?selectedValue=" + tip, //wrong param name
- $('.ddlProjectvalue').find('option').remove(); //wrong id

它们应该是:

- url: "/Opremas/getopremapoTipu?tipid=" + tip
- $('#ModelOpreme_ModelOpremeID').find('option').remove();

您可以按照我的示例进行操作。希望对您有所帮助，我的 friend !

public class Test
    {
        public int Id { get; set; }
        public string Value { get; set; }
    }
public JsonResult GetData(int? selectedValue)
        {
            List<SelectListItem> lista = new List<SelectListItem>();
            if (selectedValue != null)
            {
                foreach (var item in Data().Where(t=>t.Id == selectedValue))
                {
                    lista.Add(new SelectListItem
                    {
                        Text = item.Id.ToString(),
                        Value = item.Value
                    });
                }
            }
            else
            {
                foreach (var item in Data())
                {
                    lista.Add(new SelectListItem { Text = item.Id.ToString(), Value = item.Value.ToString() });
                }
            }
            return Json(lista, JsonRequestBehavior.AllowGet);
        }

        private List<Test> Data()
        {
            var data = new List<Test>
            {
                new Test{Id = 1, Value = "A1"},
                new Test{Id = 1, Value = "A2"},
                new Test{Id = 1, Value = "A3"},
                new Test{Id = 1, Value = "A4"},

                new Test{Id = 2, Value = "B1"},
                new Test{Id = 3, Value = "C1"},
                new Test{Id = 4, Value = "D1"},
            };
            return data;
        }

View 中的代码:

@{
    ViewBag.Title = "About";    
}

<html>
<head>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css">
</head>
<body style="margin-top:50px;">

    <script type="text/javascript">
        $(function () {
            $(".chzn-select").chosen();
            $("#ModelOpreme_ModelOpremeID").chosen();
            $(".chzn-select").chosen().change(function () {
                var id = $(this).val();
                $.ajax({

                    type: "GET",
                    contentType: "application/json; charset=utf-8",
                    url: "/Home/GetData?selectedValue=" + id,
                    data: "{}",
                    dataType: "Json",
                    success: function (data) {

                        $('#ModelOpreme_ModelOpremeID').find('option').remove();                        
                        $(data).each(function (index, item) {
                            $("#ModelOpreme_ModelOpremeID").append($('<option></option>').val(item.Text).html(item.Value));
                        });
                        $("#ModelOpreme_ModelOpremeID").chosen("destroy").chosen();
                    },
                    error: function ajaxError(response) {
                        alert(response.status + ' ' + response.statusText);
                    }
                });
            });
        });
    </script>

    <select class="chzn-select" name="faculty" style="width:200px; margin:10%;">
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">C</option>
        <option value="4">D</option>
    </select>
    <br />
    <select id="ModelOpreme_ModelOpremeID"  style="width:200px; ">
    </select>
</body>
</html>