Question

我在下面有一个jQuery点击功能，它将一个选择框中的选定值附加到另一个选择框：

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

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

2 个答案: