gpt4 book ai didi

javascript - 即时创建下拉菜单

转载 作者:太空宇宙 更新时间:2023-11-03 10:49:04 26 4
gpt4 key购买 nike

我找遍了这个问题的答案,但似乎找不到明确的答案。

我希望能够显示一个下拉菜单,该下拉菜单使用 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 号不会增加。使用 IEs DOM 浏览器查看它,id 仅增加一次。希望我知道如何在 DOM 资源管理器中剪切和粘贴,但我似乎只能复制一个元素。

最佳答案

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

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

FIDDLE

关于javascript - 即时创建下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27055065/

26 4 0