在事件后追加按钮
在事件后追加按钮
提问于 2017-05-16 00:19:08
我想在从其中一个选项字段中选择一个选项后添加一个按钮。该按钮应在选项更改后立即出现。
$(document).ready(function() {
$("option").change(function() {
$("button").append(" <button>Click Submit</button>");
});
});<link href="https://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<div id="circle1">
<select id="field1" name="age" class="dropdown1">
<option> Select One </option>
<option value="18-25">5-7</option>
<option value="26-32">7-9</option>
<option value="33-40">10-12</option>
<option value="40+">12-15</option>
</select>
</div>
<div id="submit_button">...</div>
回答 4
Stack Overflow用户
发布于 2017-05-16 00:23:47
为什么不让按钮已经存在，而将其显示设置为none？
style = "display: none;"然后当选择该选项时，只需将其设置为可见...
$("button").show()Stack Overflow用户
发布于 2017-05-16 00:25:36
例如，您可以隐藏按钮
#submit_button { display:none;}然后，当某些东西被选中时，只需显示它
$('#field1').on('change', function() {
$('#submit_button').show();})；
Stack Overflow用户
发布于 2017-05-16 00:31:09
您可以在选择更改事件上动态添加按钮，如下所示：
$('select').on('change', function() {
var r= $('<input type="button" value="new button"/>');
$("#button").append(r);
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="button"> </div>
<select>
<option value="1">One</option>
<option value="2">Two</option>
</select>
但是，您也可以隐藏按钮，然后在选择更改事件时显示它，如下所示：
$('select').on('change', function() {
$('#btn').show();
})#btn{
display:none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="button" id="btn" value="new button"/>
<select>
<option value="1">One</option>
<option value="2">Two</option>
</select>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43984378
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号