克隆一个 <select>没有一个<option>

Question

我有一个选择框，其中包含所有欧洲国家/地区，其想法是一个人选择一个或多个在其开展业务的国家/地区。

现在是这样的：

这是javascript函数：

function AddCountry(element) {

    var oldSelect = jQuery("select[name='investor-country[]']").last();
    var newSelect = jQuery(oldSelect).clone();

    jQuery(element).before(newSelect);
}

因此，当该人单击“添加国家/地区”链接时，将执行javascript并将另一个<select>插入到链接上方（链接也是要发送的参数）。 这是之前版本的精确副本。 问题是我希望它从列表中删除以前选择的公司，以便用户不能（没有HTML知识）输入两个相同的国家。

我尝试了很多，但没有成功。 我尝试了所有奇怪的jQuery组合，但主要是：

newSelect.remove(0);

据我发现，这应该从列表中删除第一个选项（0以后可以替换为selectedIndex），但事实并非如此！

Answer 1

function AddCountry(element) {

    var oldSelect = jQuery("select[name='investor-country[]']").last();
    var newSelect = jQuery(oldSelect).clone();

    // Remove previously selected option
    var selected = oldSelect.val();
    newSelect.find("option[value="+selected+"]").remove();

    jQuery(element).before(newSelect);
}

Answer 2

删除所选选项的另一种方法：

newSelect.find('option').eq(oldSelect[0].selectedIndex).remove();

Answer 3

尝试这个：

    //get the selected value
    var val = $("select[name='investor-country[]']").val();
    //get the selected option
    var option = $("option[value="+val+"]");
    //append the selected country somewhere
    $('#selected').append('<span>'+option.text()+'</span> ');
    //remove the selected option
    option.remove();

DEMO