下拉选项更改时如何使用jquery清空选择框

Question

我在下面有一个 jQuery click 函数，它将一个选定值从一个选择框附加到另一个：

// Add Button
$('#addbtn').click(function() {
    var selectedOption = jQuery("#studentremain option:selected");
    selectedOption.appendTo($("#studentadd"));
});   

现在我遇到的问题是，如果用户更改下拉菜单中的选项，那么我希望选择框 #studentadd 恢复为空。问题是附加到选择框中的值仍然存在，如何清空选择框？

以下是下拉菜单更改时的 jQuery 函数以及我尝试清空选择框：

$('#sessionsDrop').change(function() {
    if ($(this).val() !== '') {
        var text = $(this).find('option:selected').text();
        $('#studentadd').val('');     
    }
});

HTML/PHP：

选择框：

$addSELECT = "";  
$addSELECT .= '<select name="addtextarea" id="studentadd" size="10">';
$addSELECT .= '</select>'; 

下拉菜单：

$sessionHTML = '<select name="session" id="sessionsDrop">'.PHP_EOL;
$sessionHTML .= '<option value="">Please Select</option>'.PHP_EOL;        
$sessionHTML .= '</select>';

Answer 1

肯定会这样吗？

$('#studentadd').html('');

Answer 2

要删除元素的内容，您可以使用empty()：

$('#sessionsDrop').change(function() {
    if ($(this).val() !== '') {
        var text = $(this).find('option:selected').text();
        $('#studentadd').empty();     
    }
});