Only one option can be selected using an HTML form with multiple formats.

Question

I have several choices that look like this:

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

As you can see, there is one selected value. This is always the first option that I choose. However, when I select several options with a click of a button or a click of a command, the newly selected elements are not configured to contain the selected attribute = "selected", even if visually, it seems to the user that the selected selections are highlighted.

In this regard, it acts as a single selector, but I figured that adding the multiple = "multiple" attribute would allow us to assign the selected attribute to multiple parameters.

Is this a common problem? Maybe this is due to page reloading? What is the expected behavior?

Answer 1

... newly selected items are not configured to contain the selected attribute = "selected" ...

Right You will also notice that the value attribute in input not updated when the user updates its value (for example, if you look at outerHTML ).

Here's how it works. This is not a mistake or something that you are doing wrong. The execution state of the control is simply not reflected in the model of the HTML attribute of the element.

What is the expected behavior?

This is the expected behavior. If you want to know which elements are selected, do not look at the attributes, look at the selected property (not an attribute) of the parameter.

If you need an array of selected instances of HTMLOptionElement :

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

If you want the actual values, combine them with .map :

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

You can, of course, easily wrap this in your own minimal jQuery plugin:

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

then

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

---

Your (good) question covers one of the (many) dark corners of how DOM and HTML serialization and browsers evolved over the years. Nobody would have designed this. :-) And yet, quirks and all this works surprisingly well.

Answer 2

Since you noted jQuery :

Until the attribute of the HTML tag itself is updated, the value of the selected property is updated to match the user interface.

You can still determine exactly which elements are selected with $(element).prop('selected') , as in the example:

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