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

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

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

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

Answer 1

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

对.您还会注意到,当用户更新其值时,不会更新a 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序列化以及浏览器多年来如何发展的(很多)黑暗角落之一.没有人会设计这个.:-)然而,怪癖和所有,它的效果令人惊讶.