html多选表单只能选择一个选项

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>

正如我们所看到的，有一个选定的值。这始终是我选择的第一个选项。但是，当我使用 shift click 或 command click 选择多个选项时，新选择的项目不会被调整以包含 selected="selected" 属性，即使在视觉上，用户似乎会突出显示所述选择。

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

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

Answer 1

...新选择的项目没有调整为包含 selected="selected" 属性...

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

这就是事情的运作方式。这不是错误或您做错了什么。控件的运行时状态只是没有反映在元素的 HTML 属性模型中。

预期的行为是什么？

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

如果您想要一个 选定 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('; '));
});