Блог

Главная - Вопросы по программированию - Как заполнить несколько выпадающих списков одним вызовом ajax

Как заполнить несколько выпадающих списков одним вызовом ajax

#c# #jquery

#c# #jquery

Вопрос:

Приведенный ниже код генерирует 5 выпадающих списков.

 @{
for (int i = 0; i < 5; i  ) { <tr>
    <td> @Html.Editor("["   i   "].QNo", new { htmlAttributes = new { @class = "form-control ", @type = "text",
        @placeholder = " QNo", @required = "", @id = "txtQNo", @style = "width:60px;" } }) </td>
    <td>amp;nbsp;amp;nbsp;amp;nbsp;</td>
    <td> @Html.DropDownList("["   i   "].Question", new SelectList(string.Empty, "Value", "Text"), "Select Question",
        new { @class = "form-control ", @id = "Question", @style = "width:900px;" })</td>

    </tr>
    }
  }

Я пытаюсь заполнить вышеуказанное выпадающее меню 5 с помощью набора значений, которые я получаю через приведенный ниже ajax-вызов

 $("#ReflectionType").on("change", function (event) {
    $.ajax({
        type: "post",
        url: "/Question/GetQuestions",
        data: { TypeId: $('#ReflectionType').val() },
        datatype: "json",
        traditional: true,
        success: function (data) {
            debugger;
            $.each(data, function (index, value) {

                var markup = '';
                $("#Question").append('<option value="'   value.Question   '">'   value.Question   '</option>');
               
            });
           
        }
    });

Приведенный выше фрагмент обновляет только один из выпадающих списков (первое выпадающее меню), где он должен обновлять все пять выпадающих списков.

Комментарии:

1. Почему вы сохраняете один и тот же идентификатор «Вопрос» для всех 5 выпадающих списков?

2. идентификаторы должны быть уникальными на странице (по определению) …. вместо этого используйте class

3. @RahulRaut В этом случае, как мне получить уникальный идентификатор, когда выпадающие списки создаются в цикле for?

4. new { @class = "form-control ", @id = "Question" i, @style = "width:900px;" } Вот как вы можете сгенерировать уникальный идентификатор.

Ответ №1:

 @{
for (int i = 0; i < 5; i  ) { <tr>
    <td> @Html.Editor("["   i   "].QNo", new { htmlAttributes = new { @class = "form-control ", @type = "text",
    @placeholder = " QNo", @required = "", @id = "txtQNo", @style = "width:60px;" } })</td>
    <td>amp;nbsp;amp;nbsp;amp;nbsp;</td>
    <td> @Html.DropDownList("["   i   "].Question", new SelectList(string.Empty,"Value", "Text"), "Select Question",
    new { @class = "form-control ", @id = "Question" i, @style = "width:900px;" })</td>

</tr>
   }
}

Это сгенерирует уникальный идентификатор следующим образом Question0, Question1, Question2, Question3, Question4

 $("#ReflectionType").on("change", function (event) {
$.ajax({
    type: "post",
    url: "/Question/GetQuestions",
    data: { TypeId: $('#ReflectionType').val() },
    datatype: "json",
    traditional: true,
    success: function (data) {
        debugger;
        $.each(data, function (index, value) {

            var markup = '';
            for(let j = 0; j < 5; j  ){
                $("#Question" j).append('<option value="'   value.Question   '">'   value.Question   '</option>');
           }
        });

    }
});

Как я вижу, ваш цикл выполняется через 5 итераций, вы можете запустить его таким же образом и добавить данные из вызова ajax. Или вы можете использовать starts with selector следующим образом

 $('[id^=Question]').each(function(index,element){
 $(element).append('<option value="'   value.Question   '">'   value.Question   '</option>');
})

Надеюсь, это решит вашу проблему. Удачного кодирования!