Дублировать элемент при нажатии кнопки с помощью jQuery

Question

Я новичок в jQuery, и я пытаюсь вызвать другое одинаковое раскрывающееся меню, которое появляется каждый раз, когда пользователь нажимает кнопку. Я думал, что это будет работать, где #append кнопка ID и #foo является выпадающим ID:

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#append").click(function(){ 
      $("#foo").append($("#foo")); 
     }); 
    }); 
</script> 

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

Answer 1

Вы хотите что-то вроде этого:

$(document).ready(function(){ 
    $("#append").click(function(){ 
    $("#foo").parent().append($("#foo").clone().removeAttr("id")); 
    }); 
}); 

.append() добавляет к концу элемента он был вызван, так что в этом случае вы хотите добавить к родителю, не внутри<select> элемента (как и вы, чтобы добавить опции). Кроме того, вы хотите использовать .clone(), если вы не хотите переместить исходный экземпляр. Также убедитесь, что ваши идентификаторы уникальны, я удаляю id="foo" и даю ему класс, или удалю идентификатор на копиях и т. Д. - все, кроме дубликатов идентификаторов.

Answer 2

Если вы хотите, чтобы дублировать элемент использовать clone():

$("#foo").clone().attr("id", "foo2").insertAfter("#foo"); 

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