Question

在使用MVC5方面我还很陌生。我有一个下拉列表，选择后会触发控制器，并且控制器会返回项目列表。我想将这些项目添加到另一个下拉列表中。

.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);
            }
        }       
    });
}

从控制器返回的值：

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

这会将列表中的所有字母添加为下拉列表的一个选项。如何捕捉单词而不是字母？

Answer 1

您无需在选择内<option>，也不需要在循环中指定像select.options[select.options.length]那样使用哪个选项

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

编辑：由于我们在评论中进行了讨论，并且您说过，当数据来自控制器时，它说类型是string，这意味着您没有真正的数组，而只有该数组的字符串表示形式。
那么，您需要什么？在迭代之前可能要进行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的回答所示。

但是，如果您不想从客户端将字符串解析为数组或jsonObject，则可以从以下方法更新控制器方法：

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或数组，这在检索复杂的数据集（例如自定义类列表）时非常有用。您可以通过以下方式使用此列表：

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>

当然，第一个标记是完全可选的，仅对诸如“选择一个选项”之类的说明有用

MVC5，jQuery：如何将多个项目添加到下拉列表？

2 个答案: