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

【问题标题】：jQuery select multiple options only selects the last valuejQuery选择多个选项只选择最后一个值
【发布时间】：2014-03-22 12:48:02
【问题描述】：

我的下拉菜单启用了多个选项。我通过

选择这些选项

$("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();

【问题讨论】：

你是在增加 ruleId 的值吗？我想是的，但我认为你只会增加价值，保持在最后。
不，我没有修改 ruleId。我使用它是因为可以有很多选择标签。我的问题在于选项。
@user1151659，为选择框发布完整的 JS/HTML。
@LShetty 在这里，我将其添加到原始问题中。
@user1151659，感谢您的代码，现在您的问题需要澄清一下，不确定我是否理解您。你能详细说明一下吗？还有你什么时候打电话给deselectCountry？什么是#countryFlag？

标签： javascript jquery html css

【解决方案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>

【讨论】：