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

Question

I have a select box with all european countries in there, the idea is that a person picks one or more countries that he/she does his/her business in.

This is how it looks right now:

And this is the javascript function:

function AddCountry(element) {

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

    jQuery(element).before(newSelect);
}

So when the person clicks on the Add country link, the javascript gets executed and another <select> is inserted above the link (the links is also the parameter being sent). This is an exact copy of the one before. The thing is I want it to remove the previous selected company from the list so the user can not (without having HTML knowlegde) enter two of the same countries.

I tried alot but haven't succeeded. I tried all kind of weird jQuery combinations but mainly:

newSelect.remove(0);

As far as I could find this should remove the first option from the list (0 can be replace with selectedIndex later) but it doesn't!

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

Try this:

    //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