MVC 5 & jQuery：以编程方式将多个项目添加到下拉列表

Question

我对使用 MVC5 很陌生。我有一个下拉列表，选择后它会触发控制器和控制器 returns 项目列表。我想将这些项目添加到另一个下拉列表中。

.cshtml

<select class="comboBox" id="urunGrubu">
<option></option>
</select>

脚本

    function getCinsItem() {
    var value = document.getElementById("urunCinsi").value;
    $.ajax({
        dataType: "html",
        type: "POST",
        url: "/Kuyumcu/UrunEkle1",
        data: { k: value },
        success: function (data) {
            var select = document.getElementById("urunGrubu");
            for (index in data) {
                select.options[select.options.length] = new Option(data[index], index);
            }
        }       
    });
}

来自控制器的 returns 值：

'["14 AYAR","18 AYAR","21 AYAR","22 AYAR","24 AYAR","8 AYAR","HURDA","SADE"]'

这会将列表中的所有字母作为选项添加到下拉列表中。我怎样才能抓住单词而不是字母？

Answer 1

您不需要 select 中的 <option> 并且在循环中也不需要像这样指定要使用的选项 select.options[select.options.length]

获取数据时，只需将new Option（即一个元素）附加到DOM中的select元素即可。

编辑：因为我们在评论中谈到，你说当数据来自控制器时它说类型是 string，这意味着你没有真正的数组，你只有这个数组的字符串表示。
那么，你需要什么？ a 在迭代它之前可能解析一个 JSON.parse(data)，以避免对每个字符进行迭代。

下面是解析的例子：.

var data = '["14 AYAR","18 AYAR","21 AYAR","22 AYAR","24 AYAR","8 AYAR","HURDA","SADE"]'
//Above is a string that came from controller
console.log("Type before parse:", typeof data)

var select = document.getElementById("urunGrubu");

data = JSON.parse(data)
console.log("Type after parse:", typeof data) //parsed as an object/array

for (index in data) {
    select.append(new Option(data[index], index));
}

<select class="comboBox" id="urunGrubu">
</select>

Answer 2

我不确定我是否正确理解了你的问题。

我觉得您想将数组中的每一项添加为下拉列表的新选项。

如果是这样，那么您提供的代码就很好用。我没有问题重现此 jsFiddle 的行为（注释行也有效）

根据您的意见进行编辑： 您声明一个字符串返回到您的 ajax 请求，这是完全可行的，如 Calvin Nunes 的回答所示。

但是如果您不想将字符串解析为数组或来自客户端的 json对象，您可以从此更新您的控制器方法：

public IActionResult UrunEkle1(TypeOfParameter k)
{
   //Retrieve the data you have to return
   return data;
}

对此：

public JsonResult UrunEkle1(TypeOfParameter k)
{
   //Retrieve the data you have to return
   return Json(data);
}

从现在开始，您无需解析结果即可将其用作 json 或数组，这在检索复杂数据集（例如列表）时非常有用自定义 class。您可以这样使用此列表：

select.options[select.options.length] = new Option(data[index].label, data[index].id, data[index].isDefaultSelected, data[index].isSelected);

希望它完成接受的答案！

window.populateDropdown = function() {
  var select = document.getElementById("urunGrubu");
  for (var index in data) {
    select.options[select.options.length] = new Option(data[index], index);
    //select.options.add(new Option(data[index], index));
  }
}
var data = ["14 AYAR", "18 AYAR", "21 AYAR", "22 AYAR", "24 AYAR", "8 AYAR", "HURDA", "SADE"]

<select class="comboBox" id="urunGrubu">
  <option>Default Option</option>
</select>
<button type="button" onclick="populateDropdown()">
Trigger
</button>

当然，第一个标签是完全可选的，仅对 "Select an option"

等指令有用

MVC 5 & jQuery：以编程方式将多个项目添加到下拉列表

MVC5 & jQuery: Programatically add several items to dropdown

asp.net-mvc

jquery

asp.net-ajax