Добавление тега select в форму с помощью jQuery

#javascript #jquery #web #domdocument

#javascript #jquery #веб #domdocument

Вопрос:

Мне нужно добавить тег select в форму в jquery Когда я пытаюсь добавить jquery добавляет строку объекта в html, может ли кто-нибудь указать, где я ошибаюсь

HTML

  <table>
    <tr>
        <th>Test</th>
        <th>Entities</th>
        <th>Group</th>
        <th>Members</th>
    </tr>

    <tr class=color_one>
        <td> Flow </td>
        <td>    

                mT1127-1 <br> 

                mT1127-2 <br> 

                mT1127-3 <br> 

        </td>
        <td>
            <select class="group_select_Flow" id="group" name="group"><option value=""></option>
<option value="369 - Antibody Validations Flow">369 - Antibody Validations Flow</option>
<option value="396 - Flow">396 - Flow</option>
<option value="389 - Flow">389 - Flow</option></select>
        </td>
        <td>
            <select class="group_member_select_Flow" id="group_members" name="group_members"></select> amp;nbsp
            <a href="#" style = "text-decoration:none;color:darkblue;" class="add_more"> </a>
        </td>
    </tr>

    <tr class=color_two>
        <td> Western </td>
        <td>    

                mT1127-1 <br> 

                mT1127-2 <br> 

                mT1127-3 <br> 

        </td>
        <td>
            <select class="group_select_Western" id="group" name="group"><option value=""></option>
<option value="369 - Antibody Research Western">369 - Antibody Research Western</option>
<option value="369 - Antibody Validations Western">369 - Antibody Validations Western</option>
<option value="378 - Antibody Support Western">378 - Antibody Support Western</option>
<option value="389 - Western">389 - Western</option>
<option value="392 - Western">392 - Western</option>
<option value="396 - Western">396 - Western</option>
<option value="Antibody Western">Antibody Western</option></select>
        </td>
        <td>
            <select class="group_member_select_Western" id="group_members" name="group_members"></select> amp;nbsp
            <a href="#" style = "text-decoration:none;color:darkblue;" class="add_more"> </a>
        </td>
    </tr>

</table>
  

СКРИПТ

 $(document).ready(function(){
$("a.add_more").on("click", function(){
    var closest_td = $(this).closest("td");
    var select_tag = closest_td.find("select");
    closest_td.append("<br>"   $(select_tag));
});//add_more.on click
});//dom ready
  

http://jsfiddle.net/3vTAH/

Ответ №1:

Вы преобразуете коллекцию элементов jQuery DOM в строку. Вам нужно добавить новый элемент DOM или клон существующего.

 $(document).ready(function(){
    $("a.add_more").on("click", function(){
        var closest_td = $(this).closest("td");
        var select_tag = closest_td.find("select:first");
        closest_td.append("<br>").append(select_tag.clone());
    });//add_more.on click
});//dom ready
  

http://jsfiddle.net/3vTAH/2/