Question

我已经到处寻找答案，但似乎无法找到明确的答案。

我希望能够显示一个下拉列表，使用PHP填充MySQL，并在其旁边添加一个'+'或点击后会创建另一个下拉列表，其中包含与第一个相同的数据。

通过这种方式，用户可以根据需要添加任意数量的下拉菜单。每个下拉列表中将有大约25个项目。我对JS，JQuery等开放 - 只需要完成它！

我会感激任何帮助。

罗布

修改

睡了一夜 - 让我们再试一次！基于@adeno代码，我提出了这个问题：

?>

<!doctype html>
<html lang="en">
 <head>
 <title>Document</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</head>

<body>

<form action = 'testselectprocess.php' method='POST'>

<div>
<select id='test' name='test0'>
    <option name='first' value = '1'>option 1</option>
    <option name='second' value = '2'>option 2</option>
    <option name='third' value = '3'> option 3</option>
</select>
<select id='counting' name='count0'>
    <option name='first' value = '1'>1</option>
    <option name='second' value = '2'>2</option>
    <option name='third' value = '3'>3</option>
</select>
</div>

<button  type='button' class="more">Add another...</button>

<script>
var c=0;
$('.more').on('click', function() {
//alert(c);
$(this).before( $(this).prev().clone());
$('#test').attr('name', 'test'+ c)
$('#counting').attr('name', 'count'+ c)
c++;
});


</script>

<input type="submit" value="Add this." name="what">

</form>

 </body>
</html>

麻烦是 - 在第一次'添加另一个......'之后，id号码不会增加。使用IE浏览器DOM浏览器查看它时，id仅增加一次。希望我知道如何剪切和粘贴DOM浏览器，但我似乎只能复制一个元素。

Answer 1

取决于标记，但原则上它非常简单，您创建一个按钮，单击该按钮克隆选择并插入克隆

$('.more').on('click', function() {
    $(this).before( $(this).prev().clone() )
});

FIDDLE

动态创建下拉列表

1 个答案: