动态添加和删除项目以选择jquery
这里是使用jquery选择动态添加和删除项目的示例
html
<select id="List" class="form-control pull-left" style='width:40%'>
<option value="select">Select</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="new">new</option>
<option value="old">old</option>
</select>
<input type="button" id="delete"
value="delete" class="btn btn-danger" />
<br />
<input type='text' id="readme" class='form-control pull-left' style="width:40%" /><input id="add" class="btn btn-success" type="button" value="add" /><br />
<div class="result"></div>
JQUERY
$('#add').on('click',function(){
$("#List").append('<option>'+$('#readme').val()+'</option>');
$('.result').html('1 item added to select list').hide(2000);
});
$('#delete').on('click',function(){
$("#List option:selected").remove();
$('.result').html('1 item deleted to select list').hide(2000);
});
演示:
最佳答案
一切似乎都正常,除了在第一次添加或删除后看不到通知(“已添加 1 项...”)。您可以通过确保首先 show()
结果 div 来解决此问题。
$('#add').on('click',function(){
$('<option>').
text( $('#readme').val() ).
appendTo('#List');
$('.result').html('1 item added to select list').show().hide(2000);
});
$('#delete').on('click',function(){
$("#List option:selected").remove();
$('.result').html('1 item deleted from select list').show().hide(2000);
});
此外,使用 text()
而不是连接字符串可以避免用户在输入字段中输入 HTML 时出现问题。
关于javascript - 动态添加和删除项目以选择jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27972031/