当用户点击Javascript中的按钮时复制下拉列表 [英] Copy drop-down lists when user clicks button in Javascript

问题描述

如何添加更多下拉列表到表单中，所以当用户点击一个按钮时，下拉框会被添加到表单中？ >我在猜测某种javascript？

更新：

我希望能够使用与第一个相同的数据添加更多下拉列表。所以下拉列表1有1,2,3选项。用户然后点击添加下拉列表，第二个下拉列表包含1,2,3。

解决方案

您可以使用< code .cloneNode（）。

演示： http://jsfiddle.net/ThinkingStiff/pSEUH/

HTML：

 < form id =form> 
< select id =select> 
< option> one< / option>< option> two< / option>< option> three< / option> 
< / select> 
< button id =add>添加< / button> 
< / form> 
  

脚本：

  document.getElementById（'add'）.addEventListener（'click'，function（event）{
 
 event.preventDefault（）; 
 var select = document.getElementById 'select'）.cloneNode（true）; 
 document.getElementById（'form'）.appendChild（select）; 
 
}，false）; 
  

How would I go about adding more drop down lists to a form, so when a user clicks a button a drop-down box will be added to the form?

I'm guessing some sort of javascript?

UPDATE:

I want to be able to add more dropdown lists with the same data as the first one. So a dropdown list 1 has 1,2,3 as options. The user then clicks add dropdown list and the second dropdown list contains 1,2,3.

解决方案

You can do this with .cloneNode().

Demo: http://jsfiddle.net/ThinkingStiff/pSEUH/

HTML:

<form id="form">
    <select id="select">
        <option>one</option><option>two</option><option>three</option>
    </select>
    <button id="add">Add</button>
</form>

Script:

document.getElementById( 'add' ).addEventListener( 'click', function ( event ) {

    event.preventDefault();
    var select = document.getElementById( 'select' ).cloneNode( true );
    document.getElementById( 'form' ).appendChild( select );

}, false );

这篇关于当用户点击Javascript中的按钮时复制下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！