克隆<select>，不带一个<option> </option> </select>

Question

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

这就是现在的样子：

这是javascript函数：

function AddCountry(element) {

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

    jQuery(element).before(newSelect);
}

因此，当用户点击添加国家/地区链接时，javascript会被执行，另一个＆lt; select＆gt;插入链接上方（链接也是正在发送的参数）。这是之前的精确副本。问题是我希望它从列表中删除以前选择的公司，这样用户就不能（没有HTML knowlegde）进入两个相同的国家。

我尝试了很多但没有成功。我尝试了各种奇怪的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