我正在我的项目中设置我的借阅交易,我需要有一个多下拉列表。
如果按下按钮+,则添加另一个下拉列表。我应该在哪里设置下拉列表的代码?
谢谢...
<div class="row">
<div class="col-md-4 mb-3">
<label for="colFormLabel" class="col-sm col-form-label">tool</label>
<select name= "tools" class="form-control" id="colFormLabel"required>
<option value="">crimper</option>
<option value="">soldering iron</option>
</select>
</div>
<div class="col-md-1.2 mb-3">
<label for="colFormLabel" class="col-sm col-form-label">quantity</label>
<select name="qty" class="form-control" id="colFormLabel"required>
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="col-md-1 mb-3">
<label for="colFormLabel" class="col-sm col-form-label">more</label>
<button id="plus" class="plus form-control btn-outline-success" name="+" ><b>+</b></button>
</div>
</div>
$(document).ready(function () {
$("#plus").click(function () {
var $tools = $("select[toolname$='tools']:first").clone();
$("form").append("<br/>").append($tools);
});
});
我在你的HTML中删除了id。从克隆时起,您无法克隆id,因为它们必须是唯一的。
另外我猜你只想复制整行?所以改变了你的代码来做到这一点。你没有使用toolname
属性的任何选择,所以这不起作用。你也没有一个表格可以附加到html上。
我将方括号([]
)添加到选择元素的名称,以便它们可以用作数组数据。
最后我告诉clone方法在按钮上包含事件处理程序,因此它可以在所有行上工作,但将withDataAndEvents
参数设置为true。或者,您可以使用事件委派。
添加了一点CSS,因此该行实际上显示为代码段中的一行。当然,代码不需要这样做。
我建议使用on('click', fn)
而不是click()
,但它也适用于点击。
$(document).ready(function() {
$("#plus").click(function() {
var $row = $(".row:first").clone(true);
$("form").append($row);
});
});
.mb-3 {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="row">
<div class="col-md-4 mb-3">
<label for="colFormLabel" class="col-sm col-form-label">tool</label>
<select name="tools[]" class="form-control" required>
<option value="">crimper</option>
<option value="">soldering iron</option>
</select>
</div>
<div class="col-md-1.2 mb-3">
<label for="colFormLabel" class="col-sm col-form-label">quantity</label>
<select name="qty[]" class="form-control" required>
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="col-md-1 mb-3">
<label for="colFormLabel" class="col-sm col-form-label">more</label>
<button id="plus" class="plus form-control btn-outline-success" name="+"><b>+</b></button>
</div>
</div>
</form>
请尝试以下代码:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="row">
<div class="myDiv">
<div class="col-md-4 mb-3">
<label for="colFormLabel" class="col-sm col-form-label">tool</label>
<select name= "tools[]" class="form-control" id="colFormLabel"required>
<option value="">crimper</option>
<option value="">soldering iron</option>
</select>
</div>
<div class="col-md-1.2 mb-3">
<label for="colFormLabel" class="col-sm col-form-label">quantity</label>
<select name="qty[]" class="form-control" id="colFormLabel"required>
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
</div>
<div class="col-md-1 mb-3">
<label for="colFormLabel" class="col-sm col-form-label">more</label>
<button class="plus form-control btn-outline-success" name="+" ><b>+</b></button>
</div>
</div>
</body>
</html>
<script>
$(".plus").click(function() {
var html = $(".myDiv").html();
document.body.insertAdjacentHTML( 'afterbegin', html );
//alert(html);
});
</script>
这是使用onClick
调用特定函数的另一种方法:
HTML
<button class="plus form-control btn-outline-success" name="+" onclick="myDiv()"><b>+</b></button>
JS:
function myDiv() {
document.body.insertAdjacentHTML( 'afterbegin', '<div>...</div>' );
}