Question

我正在尝试将JSON数据绑定到下拉列表

我的场景是我想获取数据并绑定到动态下拉列表

在Seperate Class中，我使用linq来获取像

这样的数据

    public SelectList getProjects()
    {
        IEnumerable<SelectListItem> projectslist = (from proj in res.PROJECTs where proj.IS_DELETED == "N" select proj).AsEnumerable().Select(projt => new SelectListItem() { Text = projt.NAME, Value = projt.ID.ToString() });
        return new SelectList(projectslist, "Value", "Text", PROJ_ID);
    }

在控制器中：

ViewBag.ProjectList=(from proj in res.PROJECTs where proj.IS_DELETED == "N" select proj).AsEnumerable().Select(projt => new SelectListItem() { Text = projt.NAME, Value = projt.ID.ToString() });

在视图中：

    @for (int i = 0; i <2; i++)
    {                                    {
   @Html.DropDownListFor(m => m.GetTimeSheetDetails[i].PROJ_ID, (SelectList)ViewBag.ProjectList, "-- Choose a Project --", new { @class = "ddlProjectvalue" })
    }

现在，我正在尝试，如果我们有三个下拉列表，我们在第一个下拉列表中选择一个列表项不应该显示在第二个下拉列表中，并且在第三个下拉列表中不应该显示我之前选择的列表项如下的写作脚本：

     <script>
    $(document).ready(function () {
        $('.ddlProjectvalue').change(function () {
            debugger;
            var selectedValue = $(this).val();
            if (selectedValue != null && selectedValue != '') {
                debugger;
                $.ajax({

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

                        // first remove the current options if any
                        $('.ddlProjectvalue').find('option').remove();

                        // next iterate thru your object adding each option to the drop down\    
                        $(data).each(function (index, item) { // GETTING ERROR HERE
                            debugger;

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

我将从Controller返回JSON数据：

    public ActionResult GetDDLData(string selectedValue)
    {
        int projectid = Convert.ToInt32(selectedValue);

        IEnumerable<SelectListItem> projectslist = (from proj in db.PROJECTs where proj.IS_DELETED == "N" && proj.ID != projectid select proj).AsEnumerable().Select(projt => new SelectListItem() { Text = projt.NAME, Value = projt.ID.ToString() });
        var result = new SelectList(projectslist, "Value", "Text", tm.PROJ_ID);
        return Json(result, JsonRequestBehavior.AllowGet);
    }

我试过了，但得到的错误就像

      "Syntax error, Unrecognized Expression"

我做错了，请帮助我。

Answer 1

这将对您有所帮助：

$.ajax({
            url: "@Url.Action("GetDDLData","Employer")",
            data: {selectedValue:selectedValue},
            dataType: "json",
            type: "GET",
            error: function () {
                alert(" An error occurred.");
            },
            success: function (data) {
                var optionhtml1 = '<option value="' +
                 0 + '">' + "--Select State--" + '</option>';
                $(".ddlProjectvalue").append(optionhtml1);

                $.each(data, function (i) {

                    var optionhtml = '<option value="' +
                data[i].Value + '">' +data[i].Text + '</option>';
                    $(".ddlProjectvalue").append(optionhtml);
                });
            }
        });

Answer 2

//Controller Code

public ActionResult getAccount()
         {
             var result = new SelectList(db.Partymsts, "Account", "Account");
             return Json(result, JsonRequestBehavior.AllowGet);
         }

// js code

 $.ajax({
                type: "POST",
                url: "/NewMaster/getAccount",
                dataType: "json",
                contentType: "application/json; charset=utf-8",

                success: function (data) {
                var optionhtml1 = '<option value="' +
                 0 + '">' + "--Select State--" + '</option>';
                $(".cs3").append(optionhtml1);

                $.each(data, function (i) {

                    var optionhtml = '<option value="' +
                data[i].Value + '">' +data[i].Text + '</option>';
                    $(".cs3").append(optionhtml);
                });
            }
            });


// html code


<select id="cs3" name="cs3"   class="cs3 form-control input-small"> </select>




its working !!

Answer 3

如果你的json是正确的，下面的方法就可以了。把你的ajax成功的代码放到

success:function(data){
 $('.ddlProjectvalue').empty();
 $.each(data,function (index, item) { 
    $('.ddlProjectvalue').append$('<option>', {
                                value: item.Value,
                                text: item.Text
                            }, '<option/>')
                            }
                        );
   }

Answer 4

我们已经这样做了

Dropdown.append($('<option></option>').val(item.col1).text(item.col2));

Answer 5

function GetDropDownData(stateid) {
        $.ajax({
            type: 'GET',
            url: '@Url.Action("getdist","Home")',
            data: {stateid:stateid},
            dataType: 'json',
            success: function(data)
            {
                $("#districtId").empty();
                $("#districtId").append('<option value="">--Select--</option>');
                $.each(data, function (id, result) {
                        $("#districtId").append('<option value"'+result.Value+'">'+result.Text+'</option>');
                    });
                },
                failure: function () {
                    $("#districtId").empty();
                    $("#districtId").append('<option value="">--Select--</option>');
                }
            });
    }

如何使用jQuery将JSON数据绑定到Asp.net MVC中的dropdownlist

5 个答案: