Question

我的下拉列表启用了多个选项。我通过

选择这些选项

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

但是，当我执行$("select#countries-"+ruleId).val()时，它只会获得最后选择的值。但如果我按下Mac键选择它们，它会选择多个值。

任何线索？

这是选择框的生成标记

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

这些是事件处理程序：

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

我使用此功能撤消选择：

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

我尝试使用以下方法获取所选值：

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

Answer 1

这可能是你所追求的：

演示：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>

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

1 个答案: