动态添加和删除项目以选择 jquery

Dynamically adding and removing items to select jquery

本文关键字：选择 jquery 删除项目 添加 动态      更新时间：2023-09-26

动态添加和删除项目以选择 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>

简讯

$('#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);
});

演示：

http://jsfiddle.net/bxsnevzs/3/

一切似乎都正常，除了在第一次添加或删除后看不到通知（"添加了 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);
});

此外，如果用户在输入字段中输入 HTML，使用 text() 而不是连接字符串可以避免出现问题。

相关文章：