javascript - Only one option can be selected with html multiple select form - Stack Overflow

admin管理员组

文章数量:1324824

I have a multiple select form that looks 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 one can see, there is one selected value. This is always the first option that I select. However, when I select multiple options with shift click or mand click, the newly selected items are not adjusted so as to contain the selected="selected" attribute, even though visually, it appears to the user that said selections are highlighted.

In this respect it is acting like a single selector, but I figured that adding the "multiple="multiple" attribute would allow for assigning the selected attribute to multiple options.

Is this a mon problem? Could it have something to do with page reloading? What is the expected behavior?

I have a multiple select form that looks 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 one can see, there is one selected value. This is always the first option that I select. However, when I select multiple options with shift click or mand click, the newly selected items are not adjusted so as to contain the selected="selected" attribute, even though visually, it appears to the user that said selections are highlighted.

In this respect it is acting like a single selector, but I figured that adding the "multiple="multiple" attribute would allow for assigning the selected attribute to multiple options.

Is this a mon problem? Could it have something to do with page reloading? What is the expected behavior?

• javascript
• jquery
• html

Share Improve this question Follow edited Sep 24, 2015 at 21:24 Malonge asked Sep 24, 2015 at 21:13 MalongeMalonge 2,04055 gold badges2525 silver badges3737 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

...the newly selected items are not adjusted so as to contain the selected="selected" attribute...

Right. You'll also note that the value attribute on an input isn't updated when the user updates its value (e.g., if you look at outerHTML).

This is just how things work. It's not a bug or something you're doing wrong. The runtime state of the control just isn't reflected in the HTML attribute model of the element.

What is the expected behavior?

This is the expected behavior. If you want to know which items are selected, don't look for attributes, look at the selected property (not attribute) of the option.

If you want an array of the selected HTMLOptionElement instances:

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

If you want the actual values, bine it 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 that up into 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 highlights one of the (many) dark corners of how the DOM and HTML serialization and browsers have evolved over the years. No one would have designed this. :-) And yet, quirks and all, it works surprisingly well.

Since you tagged with jQuery:

While the attribute on the HTML tag itself isn't updated, the value of the selected property is updated to be consistent with the UI.

You can still accurately determine which items are selected using $(element).prop('selected') as in the example:

http://jsfiddle/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('; '));
});

本文标签： javascriptOnly one option can be selected with html multiple select formStack Overflow