Клонировать элемент с помощью jQuery

Рейтинг: 0Ответов: 2Опубликовано: 12.01.2015

Всем привет. На странице есть такой элемент, он используется несколько раз: 

<select class="form-control" name="prof[]">
<option value="0">Выбрать...</option>
<option value="дворник">дворник</option>
<option value="водитель">водитель</option>
<option value="разнорабочий">разнорабочий</option>                            
</select>

Мне нужно помочь с куском кода (точнее с функцией) на jQuery, который будет забирать в переменную либо весь код этого селекта, либо только option'ны. При условии, что name формы известен. Грубо говоря, нужно, чтобы переменная содержала следующее: 

var forms = '<option value="0">Выбрать...</option><option value="дворник">дворник</option><option value="водитель">водитель</option><option value="разнорабочий">разнорабочий</option>'
javascript jquery
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Думаю, что оптимальный вариант, это добавление нужного кода по классу, добавляете к тем селектам, куда нужно вставить пункты класс .add-options и пишите в JS:

$(document).ready(function() {
   $('.add-options').append('<option value="0">Выбрать...</option><option value="дворник">дворник</option><option value="водитель">водитель</option><option value="разнорабочий">разнорабочий</option>');
});

Пример

UPD. Изменил код, теперь добавление работает по кнопке, а код берётся из селекта, который уже есть на странице, при условии, что известен name этого селекта:

$(document).ready(function() {
    var options = $('select[name="prof[]"]').html();
    var index = 4; // Чтобы делать новые селекты с уникальными name, можно использовать переменную, которая будет увеличиваться на 1 после создания нового селекта.
    $('#addSelect').click(function() {
        $('.form').append('<div class="form-group"><select class="form-control add-options" name="prof' + index + '[]">' + options + '</select></div>')
        index++;
    });
});

Пример

▲ 1

Воспользуйтесь методом clone()

Пример: http://jsfiddle.net/mvn3jrha/3/

var form_name = $'input').val();
$("select[name='"+form_name+"']").clone().insertBefore(this);