gpt4 book ai didi

javascript - 基于动态创建的下拉菜单动态显示文本框

转载 作者:行者123 更新时间:2023-11-30 20:55:39 24 4
gpt4 key购买 nike

我是 jsp 和 jquery 的新手我的代码根据点击的按钮创建动态文本框和一个下拉菜单,

创建文本框后,如果用户在动态添加文本框后选择男性选项,我想再添加一个文本框。

添加代码有效,但选择男性选项时的文本框无效。

请帮忙。

这是我的代码

<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<br />
<div class="container">
<h3 align="center">Change Control Board (CCB)</h3>
<br />
<h4 align="center">Enter Change Details</h4>
<br />
<form name="form1" method="GET" action="jsv" id="form1">
<div class="table-repsonsive">
<span id="error"></span>
<table class="table table-bordered" id="item_table">
<tr>
<th>Enter Change Name</th>
<th>Enter Change Description</th>
<th>Enter Change GW</th>
<th>Enter Change AW</th>
<th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>
</tr>
</table>
<div align="center">
<input type="submit" name="submit" class="btn btn-info" value="Insert" />
</div>
</div>
</form>
</div>
</body>

</html>
<script>
$(document).ready(function() {

$(document).on('click', '.add', function() {
var html = '';
html += '<tr> name="change_name1[]"';
html += '<td><input type="text" name="change_name[]" class="form-control change_name" /></td>';
html += '<td><textarea name="change_desc[]" class="form-control change_desc rows="3"" /></td>';
html += '<td><input type="text" name="change_GW[]" class="form-control change_GW" /></td>';
html += '<td><input style="display:none;" id="business" type="text" name="change_G[]" class="form-control change_GW" /></td>';

html += '<td><select id="purpose" name="sex-type" class="form-control item_unit"><option value="0">select</option><option value="1">male</option><option value="2">Passing on to a client</option></select></td>';

html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
$('#item_table').append(html);
});

$(document).on('click', '.remove', function() {
$(this).closest('tr').remove();
});
});

$(document).ready(function() {
$('#purpose').on('change', function() {
if (this.value == '1') {
$("#business").show();
} else {
$("#business").hide();
}
});
});
</script>

最佳答案

首先,在 $html 中连接 tr 的第一行出现错误, 它是 '<tr> name="change_name1[]"';它应该在哪里 '<tr name="change_name1[]">';但自从name属性无效 attribute对于 tr您应该将其更改为唯一的 id .

我希望通过单击按钮生成的选择菜单和输入框不是多个,因为有一个id。选择输入上的属性需要是唯一的,以防有多个选择框,但由于未提及,您对事件绑定(bind)进行了轻微更改,如下面的代码您必须更改 id从静态到动态的属性,比如在它们的 ID 上附加一个计数,我已经为你添加了它,希望它能解决你的问题。

您的最终脚本将如下所示

$(document).ready(function () {
var count = 0;
$(document).on('click', '.add', function () {
var html = '';
html += '<tr>';
html +='<td><input type="text" name="change_name[]" class="form-control change_name" /></td>';
html +='<td><textarea name="change_desc[]" class="form-control change_desc rows="3"" /></td>';
html +='<td><input type="text" name="change_GW[]" class="form-control change_GW" /></td>';
html += '<td><input style="display:none;" id="business_' + count +
'" type="text" name="change_G[]" class="form-control change_GW" /></td>';

html += '<td><select id="purpose_' + count +
'" name="sex-type" class="form-control item_unit"><option value="0">select</option><option value="1">male</option><option value="2">Passing on to a client</option></select></td>';

html +=
'<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
$('#item_table').append(html);

$('#purpose_' + count).on('change', function () {
if (this.value == '1') {
$("#business_"+count).show();
} else {
$("#business_"+count).hide();
}

});
count++;
});

$(document).on('click', '.remove', function () {
$(this).closest('tr').remove();
});


});

关于javascript - 基于动态创建的下拉菜单动态显示文本框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47692603/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com