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);
});

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

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

1 个答案: