將值傳遞到html下拉列表

Question

如何將值從查詢控制器傳遞到html視圖下拉列表。 我只想使用查詢從下拉列表中查看值，而從查詢中獲得ID列，並且該ID將在下拉列表中隱藏，並且名稱僅可見，因為我的目標可能需要唯一的ID進行更新。

目前，這里是我的偽代碼來讀取我的控制器：

<html>
    <select id="names" onclick="getNames()" style="width:200px; height:35px; margin-left:700px">
        <option value="" disabled selected>Names</option>
    </select>
</html>

<script>
    function getNames() {
        //alert("here");
        $.ajax({
            url: '/Home/showData',
            type: 'GET',

            dataType: 'json',
            success: function (data) {
                var row = '';
                $.each(data, function (i, item) {
                    row += '<option style="display:none;" value=' + item.id + '> ' + item.id + '</option>';
                        + '<option value=' + item.name + '> ' + item.name + '</option>';

                });
                $('#names').html(row); // override previous results
            },

            error: function (jqXhr, textStatus, errorThrown) {
                console.log(errorThrown.toString());
            }
        });
    }
</script>

我已經建立了查詢到返回json的控制器的查詢：

public ActionResult showData()
    {
        //Load mgr list table from MySql
        List<Details> listItems = new List<Details>();
        string constr = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
        using (MySqlConnection con = new MySqlConnection(constr))
        {
            string query = "SELECT id, concat(f_name,', ',l_name) as names FROM tblInfo";
            using (MySqlCommand cmd = new MySqlCommand(query))
            {
                cmd.Connection = con;
                con.Open();
                using (MySqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        try
                        {
                            listItems.Add(new empDetails
                            {            
                                id = Convert.ToInt32(sdr["id"]),                        
                                name = sdr["names"].ToString(),                                   
                            });
                        }
                        catch (Exception e)
                        {
                            Console.WriteLine("An error occurred: '{0}'", e);
                        }
                    }
                }
                con.Close();
            }
        }
        return Json(listItems, JsonRequestBehavior.AllowGet);
    }

Answer 1

您在AJAX調用中遇到了幾個問題：

1） <select>選擇器使用類名而不是元素名（在原始版本時）。 使用$('#names')代替。

2）您要分別為id和name創建選項列表。 您可以將value屬性設置為id並將文本設置為name 。

因此，用於填充<select>元素的AJAX回調應如下所示：

$.ajax({
    url: '/Home/showData',
    type: 'GET',
    dataType: 'json',
    success: function (data) {
        var ddl = $('#names');
        ddl.empty(); // clear existing values
        $.each(data, function (i, item) {
            ddl.append($('<option>', {
               value: item.id,
               text: item.name
            }, '</option>'))
        });
    },
    error: function (jqXhr, textStatus, errorThrown) {
        console.log(errorThrown.toString());
    }
});

但是，如果應該從頁面加載中填充下拉列表（即在從控制器端調用return View()之后），則應使用List<SelectListItem>作為選項列表，並使用DropDownListFor創建<select>元素，並將選項列表傳遞給任一ViewBag或List<SelectListItem> viewmodel屬性：

控制器動作

ViewBag.ListItems = listItems.Select(x => new SelectListItem { Text = x.name, Value = x.id }).ToList();

視圖

@Html.DropDownListFor(model => model.names, ViewBag.ListItems as IEnumerable<SelectListItem>, new { style="width:200px; height:35px; margin-left:700px" })

將值傳遞到html下拉列表

問題描述

1 個解決方案

解決方案1
0 已采納 2018-11-08 07:34:40

將值傳遞到html下拉列表

問題描述

1 個解決方案

解決方案1 0 已采納 2018-11-08 07:34:40

解決方案1
0 已采納 2018-11-08 07:34:40