jQuery选择多个选项仅选择最后一个值

Question

My dropdown has multiple options enabled. I select these options via

$("select#countries-"+ruleId+" option[value='"+ selectedValue + "']").prop("selected", "selected");

However, when I do $("select#countries-"+ruleId).val() it only gets me the LAST selected value. But if I select them with Mac key pressed, it does select multiple values.

Any clues?

Here is the genrated markup of select box

<select multiple="" id="countries-new" class="form-control" onchange="selectCountryChanged('new')">

                            <option value="US">United States (5)</option>

                            <option value="LS">Lesotho (0)</option>

                            <option value="AX">Aland Islands (0)</option>

                            <option value="AL">Albania (0)</option>

                            <option value="DZ">Algeria (0)</option>

</select>

These are the event handlers:

selectCountryChanged = function(ruleId) {
                $( "select#countries-"+ruleId+" option:selected" ).each(function() {
                    selectedValue = $(this).val();
                    $("select#countries-"+ruleId+" option[value='"+ selectedValue + "']").prop("selected", "selected"); 
                    //$("select#countries-"+ruleId+" option[value='"+ selectedValue + "']").prop('disabled', true ); 
                    if (!$("#countryFlag-"+ruleId+"-"+selectedValue).length) {
                        templateCountryBtn = $("#templateCountryBtn").html();
                        $("#countryFlags-"+ruleId).append(_.template(templateCountryBtn, {ruleId: ruleId, countryCode: selectedValue}));
                    }
                });
            }

I undo the selection using this function:

    deselectCountry = function(ruleId, countryId) {
        //$("select#countries-"+ruleId+" option[value='"+ countryId + "']").prop('disabled', false ); 
        $("select#countries-"+ruleId+" option[value='"+ selectedValue + "']").attr("selected", false); 
        $("#countryFlag-"+ruleId+"-"+countryId).remove();
    }

And I try to fetch the selected value using:

countriesList = $("#countries-"+ruleId).val();

Answer 1

This may be what you have been after:

Demo: JSFiddle

JS:

var selectCountryChanged = function(ruleId) {
    var selectVals = [];
    var html="";
    var select = $("select#countries-"+ruleId);
    select.find(':selected').each(function(i, selected) {
        selectVals.push( $(this).val() +"|" +  $(this).text());
    });
    for (i=0, j=selectVals.length; i<j; i++) {
        var sv = selectVals[i].split("|");
        html += '<a href="#" class="'+ sv[0] +'" title="'+ sv[1] +'">'+sv[1]+'</a>';
    }
    $('#flagBtn').empty().append(html);
};

var deselectCoountry = function(ruleId, val) {
    var select = $("select#countries-"+ruleId);
    select.find('option[value="' + val + '"]').prop('selected', false);
};

var ruleID = 'new';
$(document)
.on('change', '#countries-new', function(){
    selectCountryChanged(ruleID);
})
.on('click', '#flagBtn > a', function(){
    deselectCoountry(ruleID, this.className);
    $(this).remove();
});

HTML:

<select multiple="" id="countries-new" class="form-control">
    <option value="US">United States (5)</option>
    <option value="LS">Lesotho (0)</option>
    <option value="AX">Aland Islands (0)</option>
    <option value="AL">Albania (0)</option>
    <option value="DZ">Algeria (0)</option>
</select>

<div id="flagBtn"></div>