Dropdown не работает в отзывчивых jquery datatable

Question

Я использую отзывчивый набор данных jquery.

Проверьте эту ссылку http://jsfiddle.net/82v4p7cL/1/

<div id="tblSkippedItems_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer"><div class="row"><div class="col-sm-12"><table id="tblSkippedItems" class="table table-striped table-bordered nowrap dataTable no-footer dtr-inline collapsed" cellspacing="0" width="100%" role="grid" aria-describedby="tblSkippedItems_info" style="width: 100%;">
                                <thead>
                                    <tr role="row"><th class="sorting_asc" tabindex="0" aria-controls="tblSkippedItems" rowspan="1" colspan="1" style="width: 159px;" aria-label="Itemnumber: activate to sort column descending" aria-sort="ascending">Itemnumber</th><th class="sorting" tabindex="0" aria-controls="tblSkippedItems" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="Location : activate to sort column ascending"></th></tr>
                                </thead>
                            <tbody>
   <tr role="row" class="odd parent">
      <td class="sorting_1" tabindex="0" style="">02-273-BU</td>
      <td style="display: none;"> 
         <select id="ddlTest" style="width: 300px">
      </td>
        </tr>
   <tr class="child">
      <td class="child" colspan="2">
         <ul data-dtr-index="1">
            <li data-dtr-index="2" data-dt-row="1" data-dt-column="2"><span class="dtr-title">Location <small>(Picking)</small></span> <span class="dtr-data"><span class="ClsLocName">N/A </span>  <select id="ddlTest" style="width: 300px"></select></span></li>
         </ul>
      </td>
   </tr>
</tbody>
</table></div></div>
</div>

У меня есть выпадающий столбец в jquery datatable.

В адаптивном режиме новый tr создается с классом "child". И старый тр это скрыть.

Оба tr содержат выпадающий с одинаковым идентификатором Когда я пытаюсь добавить параметры в раскрывающийся список с помощью jquery, это не влияет на раскрывающийся список.

 var ddl = $('#DdlTest');
ddl.append($("<option></option>").val('0').html('Selectvalue'));

Answer 1

Существует несколько проблем с выбором HTML и JQuery. сначала вы не закрыли тег select, попробуйте закрыть его, а второй ddlTest не равен DdlTest. Вам нужно исправить эти проблемы, а затем добавить свой вариант.

 <select id="ddlTest" style="width: 300px"></select>

JavaScript

var ddl = $('#ddlTest');
ddl.append($("<option value="0"></option>");

Answer 2

Атрибут id указывает уникальный идентификатор для элемента HTML (значение должно быть уникальным в документе HTML).

Попробуйте использовать другой идентификатор в раскрывающемся списке, у вас может быть только 1 элемент с определенным идентификатором на каждой странице, скрипт работает, но он добавит параметры первого элемента с этим конкретным идентификатором.