Chỉ có một lựa chọn có thể được chọn với html nhiều chọn hình thức

Question

Tôi có một hình thức chọn nhiều trông như thế này:

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

Như người ta có thể thấy, có một giá trị được chọn. Đây luôn là tùy chọn đầu tiên tôi chọn. Tuy nhiên, khi tôi chọn nhiều tùy chọn với shift shift hoặc command click, các mục mới được chọn sẽ không được điều chỉnh để chứa thuộc tính đã chọn = "selected", mặc dù trực quan, nó xuất hiện cho người dùng cho biết các lựa chọn được đánh dấu.

Trong khía cạnh này, hoạt động như một bộ chọn duy nhất, nhưng tôi đã tìm thấy thêm "nhiều =" nhiều" thuộc tính sẽ cho phép gán các thuộc tính được lựa chọn nhiều tùy chọn.

Đây có phải là một vấn đề thường gặp? Could nó có cái gì để làm với trang nạp lại? hành vi mong đợi là gì?

Answer 1

... các mặt hàng mới được chọn không được điều chỉnh để chứa các selected = "chọn" thuộc tính ...

Ri ght. Bạn cũng sẽ lưu ý rằng thuộc tính value trên số input không được cập nhật khi người dùng cập nhật giá trị của nó (ví dụ: nếu bạn xem outerHTML).

Đây chỉ là cách mọi thứ hoạt động. Nó không phải là một lỗi hoặc một cái gì đó bạn đang làm sai. Trạng thái thời gian chạy của điều khiển không được phản ánh trong mô hình thuộc tính HTML của phần tử.

Hành vi mong đợi là gì?

Đây là hành vi mong đợi. Nếu bạn muốn biết mục nào được chọn, không tìm thuộc tính, hãy xem thuộc tính selected (không phải thuộc tính) của tùy chọn.

Nếu bạn muốn một mảng của chọnHTMLOptionElement trường hợp:

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

Nếu bạn muốn các giá trị thực tế, kết hợp nó với .map:

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

Bạn có thể, tất nhiên, một cách dễ dàng kết hợp với plugin jQuery tối thiểu của riêng bạn:

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; 
    }); 
}; 

sau đó

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

---

(tốt) Câu hỏi của bạn nêu bật một trong những (nhiều) góc tối của cách DOM và HTML serialization và các trình duyệt đã phát triển trong những năm qua. Không ai có thể có được thiết kế điều này. :-) Tuy nhiên, quirks và tất cả, nó hoạt động đáng ngạc nhiên tốt.

Answer 2

Vì bạn được gắn thẻ với jQuery:

Trong khi các thuộc tính trên thẻ HTML riêng của mình không được cập nhật, giá trị của các tài sản selected được cập nhật để phù hợp với giao diện người dùng.

Bạn vẫn có thể xác định chính xác các mục được lựa chọn sử dụng $(element).prop('selected') như trong ví dụ:

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('; ')); 
});