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

Question

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

演示:

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

Answer 1

一切似乎都正常，除了在第一次添加或删除后看不到通知(“已添加 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 时出现问题。