只有一個選項可以用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點擊或命令點擊選擇多個選項時，新選擇的項目不會被調整以包含selected =「selected」屬性，即使在視覺上，對於用戶來說顯示所述選擇被突出顯示。

在這方面，要表現得像一個單一的選擇，但我想，加入了「多個=」多」屬性將允許指定所選屬性的多個選項。

這是一個常見的問題？莫非它必須是與刷新頁面？什麼是預期的行爲？

Answer 1

...新選擇的項目，不進行調整，以便包含選定=「選擇」屬性...

Ri GHT。您還會注意到，input上的value屬性在用戶更新其值時未更新（例如，如果您查看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; 
    }); 
}; 

然後

​​

---

你（好）問題突出的DOM和HTML序列化和瀏覽器是如何經過多年的發展中（很多）黑暗的角落之一。沒有人會有這個設計這個。 :-)然而，怪癖和所有，它的效果令人驚訝。

Answer 2

既然你標記爲jQuery：

雖然沒有更新的HTML標籤本身的屬性，在selected屬性的值更新爲與用戶界面保持一致。

你仍然可以準確地確定選擇哪些項目使用$(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('; ')); 
});