如何使用JSON填充下拉菜单

时间:2016-09-14 13:36:03

标签: javascript c# json asp.net-mvc razor

我正在尝试根据另一个下拉列表的选择填充下拉框。

我创建了一个示例变量var sampleData = { Default: { value1: "text", value2: "text" }, PTDR:,以便在用户选择似乎正常工作的第一个下拉列表时找到第二个下拉列表。但是,我正在尝试从我的控制器中的方法更正数据,我不知道如何。

任何帮助或指导都将不胜感激。

public ActionResult ptdrFilter(int id)
    {
        IUnitOfWork uow = DataAccess.GetUnitOfWork();
        using (ManageProductTemplate ptLogic = new ManageProductTemplate(ref uow))
        {
            List<ProductTemplate> currentpt = ptLogic.GetBy(x => x.ProductTemplateID == id);
            List<string> pt = new List<string>();
            foreach (var item in currentpt)
            {
                pt.Add(item.DistributionRule.Name);

            }
            return Json(pt);
        }
    }


    function drFilter() {

            var sampleData = { Default: { value1: "text", value2: "text" }, PTDR: { value1: "cal", value2: "cal" }, All: { value1: "lool", value2: "loool" } };
            var dataInJSONForm = JSON.stringify(sampleData);
            var datainJSObjectForm = JSON.parse(dataInJSONForm);

            $('#dd1').on('change', function (e) {
                var valueChosenInddl2 = $(this).val();
                var options = datainJSObjectForm[valueChosenInddl2];



                var $subselect = $('#subselect');
                $subselect.children().detach();
                for (var property in options) {
                    $subselect.append($('<option>', { value: property, text: options[property] }));

<div class="editor-field">
                <select id="dd1">
                  <option value="Default">Default</option>
                  <option value="PTDR">PT/DR</option>
                  <option value="All">All</option>
                </select>

<select id="ddl2">
                    <script>
                        drFilter();
                    </script>
                </select>

1 个答案:

答案 0 :(得分:1)

你需要创建一个ajax请求来从控制器获取数据,这样的东西应该工作,这样成功时控制器的json对象就会被传递到你的函数中,而不是使用sampleData。

$.ajax({
    type: "GET",
    data: {id: 1},
    url: @Action.Url("ptdrFilter"),
    success: function(result) {
        drFilter(result);
    }
});