MVC5, jquery: Как добавить несколько элементов в выпадающий список?

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

Я не уверен, что правильно понял ваш вопрос.

Мне кажется, что вы хотите добавить каждый элемент вашего массива в качестве новой опции раскрывающегося списка.

Если это так, то код, который вы предоставили, прекрасно работает.У меня не было проблем с воспроизведением поведения на этом 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>

Конечно, первый тег совершенно необязателен и полезен только для таких инструкций, как «Выбор параметра»

Answer 2

Вам не нужно, чтобы <option> внутри выбора, а также в цикле, не нужно указывать, какую опцию вы хотите использовать следующим образом select.options[select.options.length]

Когда вы получаете данные, простодобавьте new Option (это элемент) к элементу выбора в DOM.

РЕДАКТИРОВАТЬ : поскольку мы говорили в комментариях, и вы сказали, что когда данные поступают из контроллера, он говоритчто типом является 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>