javascript - 选择 2 : delete the element selected by pressing delete key

Question

我正在使用 select2 来呈现一个可编辑的选择框，但是当我按下删除键时，在我的 Controller 中我没有检测到更改的范围

<select id="mySelect" ui-select2="{ allowClear: true}"  ng-model="select2">
    <option value="one">First</option>
    <option value="two">Second</option>
    <option value="three">Third</option>
</select>

在我的 Controller 中我写:

$('#mySelect').keyup(function(e){
    if(e.keyCode == 46) {
        console.log('Delete Key Pressed');
    }
}); 

有人有想法吗？

Answer 1

使用 jquery 获取选择值并使用所选值获取选项。

var selected= $('#mySelect').val();//get value
$( "option[value='"+selected+"']" ).remove();//delete option with value selected
$('#mySelect').prop('selectedIndex',0);//clear select

实现示例。

$('#mySelect').keyup(function(e){
    if(e.keyCode == 46) {
        var selected= $('#mySelect').val();
        $( "option[value='"+selected+"']" ).remove();
        $('#mySelect').prop('selectedIndex',0);
      
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
<select id="mySelect" ui-select2="{ allowClear: true}"  ng-model="select2">
    <option value="one">First</option>
    <option value="two">Second</option>
    <option value="three">Third</option>
</select>