Question

我有一个多选形式，如下所示：

<select multiple="multiple" id="id_form-0-project" name="form-0-project">
    <option value="0">and another test</option>
    <option value="1">another test</option>
    <option value="2" selected="selected">one more test</option>
    <option value="3">test project</option>
</select>

可以看出，有一个选定的值。这始终是我选择的第一个选项。但是，当我通过班次点击或命令点击选择多个选项时，不会调整新选择的项目以包含所选的=“选定”属性，即使在视觉上，用户看起来突出显示所述选择。

在这方面，它就像一个选择器，但我认为添加“multiple =”multiple“属性将允许将所选属性分配给多个选项。

这是一个常见问题吗？它可能与页面重新加载有关吗？预期的行为是什么？

Answer 1

...未调整新选择的项目以包含所选的=“已选择”属性...

右。您还会注意到，当用户更新其值时，value上的input属性不会更新（例如，如果您查看outerHTML）。

这就是事情的运作方式。这不是一个错误或你做错的事情。控件的运行时状态不会反映在元素的HTML属性模型中。

预期的行为是什么？

这是预期的行为。如果您想知道选择了哪些项目，请不要查找属性，查看该选项的selected 属性（非属性）。

如果您想要一个选定的 HTMLOptionElement个实例的数组：

var selected = Array.prototype.filter.call($("id_form-0-project")[0].options, function(option) {
    return option.selected;
});

如果您想要实际值，请将其与.map：

结合使用

var selected = Array.prototype.filter.call($("#id_form-0-project")[0].options, function(option) {
    return option.selected;
}).map(function(option) {
    return option.value;
});

当然，您可以轻松地将其包装到您自己的最小jQuery插件中：

jQuery.fn.selectedValues = function() {
    if (!this[0] || !this[0].options) {
        return undefined;
    }
    return Array.prototype.filter.call(this[0].options, function(option) {
        return option.selected;
    }).map(function(option) {
        return option.value;
    });
};

然后

var values = $("#id_form-0-project").selectedValues();

您的（好）问题突出了DOM和HTML序列化以及浏览器多年来如何发展的（很多）黑暗角落之一。没有人会设计这个。 :-)然而，怪癖和所有，它的效果令人惊讶。

Answer 2

自您标记为jQuery：

虽然HTML标记本身的属性未更新，但selected属性的值会更新为与UI一致。

您仍然可以使用$(element).prop('selected')准确确定选择的项目，例如：

http://jsfiddle.net/17s4q7ht/

HTML：

<select multiple="multiple" id="id_form-0-project" name="form-0-project">
    <option value="0">and another test</option>
    <option value="1">another test</option>
    <option value="2" selected="selected">one more test</option>
    <option value="3">test project</option>
</select>
<div id="status"></div>

JS：

$('#id_form-0-project').on('change', function() {
    $('#status').text($(this).find('option').map(function(i, e){
        return $(e).val() + " is " + ($(e).prop('selected') ? "" : "not ") + "selected";
    }).get().join('; '));
});

使用html多选表单

2 个答案: