Почему только первый DropDown заполняется при динамическом создании DropDown с помощью Jquery?

0

Я пытаюсь создать структуру DataEntry Grid/table, в которой пользователь добавляет новую строку при нажатии кнопки. Строка будет иметь TextBoxes, DropDown, Calendar Control. Все это должно быть сделано на стороне клиента. Пока у меня есть это, и, как вы можете видеть, я пытаюсь заполнить DropDownusing объект данных var (который работает только для первого раскрывающегося списка на данный момент). Если я могу заполнить все DropDowns жестко закодированными var data я могу попытаться извлеките данные из базы данных с помощью web-метода, но сначала я должен по возможности иметь возможность заполнять все DropDowns жестко заданными значениями, чтобы они выходили за пределы этого.

КОД

  <script src="js/jquery-1.11.0.js" type="text/javascript"></script>

<table id="field">
    <tr>
        <td>Alternatif <span class='num'>1</span></td>
        <td><input type="text" /></td>
        <td><select id="myDropDownLisTId"> <input type="text" id="datepicker"></select></td>
    </tr>
</table>
<button type="button" id="addField">Add Field</button>
<button type="button" id="deleteField">Delete Field</button>

<script id="template" type="text/template">
<tr>
    <td class="number">Alternatif</td>
    <td><input type="text" /></td>
     <td><select id="myDropDownLisTId"> <input type="text" id="datepicker"></td>

</tr>
</script>
 <script type="text/javascript">
     $(document).ready(function () {

         $("#addField").click(function (event) {
             $($("#template").html()).appendTo($("#field tbody")).show("slow");
             if ($("td").hasClass("number")) {
                 var i = parseInt($(".num:last").text()) + 1;
                 $($("<span class='num'> " + i + " </span>")).appendTo($(".number")).closest("td").removeClass('number');
             }
             event.preventDefault();
         });

         $("#deleteField").click(function (event) {
             var lengthRow = $("#field tbody tr").length;
             if (lengthRow > 1)
                 $("#field tbody tr:last").remove();
             event.preventDefault();
         });



     var data = [
    { id: '0', name: 'test 0' },
    { id: '1', name: 'test 1' },
    { id: '2', name: 'test 2' },
    { id: '3', name: 'test 3' },
    { id: '4', name: 'test 4' },
];


     for (i = 0; i < data.length; i++) {

         $("#myDropDownLisTId").append(
        $('<option />', {
            'value': data[i].id,
            'name': data[i].name,
            'text': data[i].name
        })
                );

     }
});
    </script>

FIDDLE (обновление)

http://jsfiddle.net/FSGbh/5/

  • 0
    INPUT не может быть дочерним элементом элемента SELECT. Проверьте вашу консоль, есть ошибки?
  • 0
    Нет, нет, я могу видеть
Показать ещё 2 комментария
Теги:

1 ответ

4
Лучший ответ

Проблема в том, что у вас одинаковый идентификатор дважды в коде, т.е. myDropDownLisTId.

Чтобы заставить его работать, я только что изменил идентификатор на класс, и он также загружает данные во втором раскрывающемся списке.

HTML

<table id="field">
    <tr>
        <td>Alternatif <span class='num'>1</span></td>
        <td><input type="text" /></td>
        <td><select class="myDropDownLisTId"> <input type="text" id="datepicker" /></select></td>
    </tr>
</table>
<button type="button" id="addField">Add Field</button>
<button type="button" id="deleteField">Delete Field</button>
<tr>
    <td class="number">Alternatif</td>
    <td><input type="text" /></td>
    <td><select class="myDropDownLisTId" /> <input type="text" id="datepicker" /></td>
</tr>

JQuery

     $(document).ready(function () {

         $("#addField").click(function (event) {
             $($("#template").html()).appendTo($("#field tbody")).show("slow");
             if ($("td").hasClass("number")) {
                 var i = parseInt($(".num:last").text()) + 1;
                 $($("<span class='num'> " + i + " </span>")).appendTo($(".number")).closest("td").removeClass('number');
             }
             event.preventDefault();
         });

         $("#deleteField").click(function (event) {
             var lengthRow = $("#field tbody tr").length;
             if (lengthRow > 1)
                 $("#field tbody tr:last").remove();
             event.preventDefault();
         });



     var data = [
    { id: '0', name: 'test 0' },
    { id: '1', name: 'test 1' },
    { id: '2', name: 'test 2' },
    { id: '3', name: 'test 3' },
    { id: '4', name: 'test 4' },
];


     for (i = 0; i < data.length; i++) {

         $(".myDropDownLisTId").last().append(
        $('<option />', {
            'value': data[i].id,
            'name': data[i].name,
            'text': data[i].name
        })
                );

     }
});

Демо-версия

----- РЕДАКТИРОВАТЬ -----

Я обновил ответ на основе обсуждения с пользователем. Я внес некоторые изменения в код.

HTML

<table id="field">
    <tbody>
    <tr>
        <td>Alternatif <span class='num'>1</span></td>
        <td><input type="text" /></td>
        <td><select class="myDropDownLisTId"> <input type="text" id="datepicker" /></select></td>
    </tr>
    </tbody>
</table>
<button type="button" id="addField">Add Field</button>
<button type="button" id="deleteField">Delete Field</button>

JQuery

     $(document).ready(function () {
             filldd();

            var rowstring = "<tr><td class='number'>Alternatif</td><td><input type='text'/></td><td><select class='myDropDownLisTId'/><input type='text' id='datepicker'/></td></tr>";
             $("#addField").click(function (event) {
             $("#field tbody").append(rowstring);
             filldd();
             if ($("td").hasClass("number")) {
                 var i = parseInt($(".num:last").text()) + 1;
                 $($("<span class='num'> " + i + " </span>")).appendTo($(".number")).closest("td").removeClass('number');
             }
             event.preventDefault();
         });

         $("#deleteField").click(function (event) {
             var lengthRow = $("#field tbody tr").length;
             if (lengthRow > 1)
                 $("#field tbody tr:last").remove();
             event.preventDefault();
         });
});

 function filldd(){
    var data = [
    { id: '0', name: 'test 0' },
    { id: '1', name: 'test 1' },
    { id: '2', name: 'test 2' },
    { id: '3', name: 'test 3' },
    { id: '4', name: 'test 4' },
];

    for (i = 0; i < data.length; i++) {
         $(".myDropDownLisTId").append(
            $('<option />', {
                'value': data[i].id,
                'name': data[i].name,
                'text': data[i].name
            })
         );
     }
         }

Демо-версия

Поделиться
  • 0
    Это так не то, что я хочу. Я добавляю строку динамически при нажатии кнопки.
  • 0
    Уважаемый ответ на ваш вопрос в заголовке. Вы четко упомянули, что второй выпадающий список не создается. Вы нигде не упоминали, что у вас есть проблема с динамическим добавлением строки.
Показать ещё 17 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню