javascript - select all options in html select dynamically - Stack Overflow

admin管理员组

文章数量:1295858

I have two HTML selects in a form. The first is called available and contains several options:

<select name="sortedby" multiple="multiple">
    <option value="start">
        <xsl:if test="@sortedby='start'">
            <xsl:attribute name="selected">true</xsl:attribute>
        </xsl:if>
        Start time
    </option>

    <option value="thread_id">
        <xsl:if test="@sortedby='thread_id'">
            <xsl:attribute name="selected">true</xsl:attribute>
        </xsl:if>
        Thread Id
    </option>

    <option value="user_name">
        <xsl:if test="@sortedby='user_name'">
            <xsl:attribute name="selected">true</xsl:attribute>
        </xsl:if>
        Username
    </option>
</select>

The second is called yourselection and is empty at the beginning:

<select name="sortedby_target" multiple="multiple">
</select>

There is a button which removes the selected options from available and moves them to yourselection.

This button calls a JavaScript function from a library that I can use but can't modify.

Basically it works fine. But there is a minor inconvenience: When the user moves one or several option(s) from available to yourselection, they are not selected by default "upon arrival". So currently the user has to select an option first in available than move it to yourselection, and again manually select it in yourselection, and then submit the form.

What I want is everything that arrives to yourselection should be marked as selected by default. Any ideas?

UPDATE! I have a function that can select all elements:

function selectAllOptions(obj) {
    if (!hasOptions(obj)) { return; }
    for (var i = 0; i < obj.options.length; i++) {
        obj.options[i].selected = true;
    }
}

But the question is how to call it? I do not want to add another button for that reason.

There should be something like onfill or something similar in select.

I have two HTML selects in a form. The first is called available and contains several options:

<select name="sortedby" multiple="multiple">
    <option value="start">
        <xsl:if test="@sortedby='start'">
            <xsl:attribute name="selected">true</xsl:attribute>
        </xsl:if>
        Start time
    </option>

    <option value="thread_id">
        <xsl:if test="@sortedby='thread_id'">
            <xsl:attribute name="selected">true</xsl:attribute>
        </xsl:if>
        Thread Id
    </option>

    <option value="user_name">
        <xsl:if test="@sortedby='user_name'">
            <xsl:attribute name="selected">true</xsl:attribute>
        </xsl:if>
        Username
    </option>
</select>

The second is called yourselection and is empty at the beginning:

<select name="sortedby_target" multiple="multiple">
</select>

There is a button which removes the selected options from available and moves them to yourselection.

This button calls a JavaScript function from a library that I can use but can't modify.

Basically it works fine. But there is a minor inconvenience: When the user moves one or several option(s) from available to yourselection, they are not selected by default "upon arrival". So currently the user has to select an option first in available than move it to yourselection, and again manually select it in yourselection, and then submit the form.

What I want is everything that arrives to yourselection should be marked as selected by default. Any ideas?

UPDATE! I have a function that can select all elements:

function selectAllOptions(obj) {
    if (!hasOptions(obj)) { return; }
    for (var i = 0; i < obj.options.length; i++) {
        obj.options[i].selected = true;
    }
}

But the question is how to call it? I do not want to add another button for that reason.

There should be something like onfill or something similar in select.

• javascript
• html
• html-select
• form-submit
• multi-select

Share Improve this question Follow edited Sep 6, 2022 at 18:01 aynber 23k99 gold badges5454 silver badges6767 bronze badges asked Jun 17, 2013 at 12:05 SanyifejűSanyifejű 2,7401010 gold badges5050 silver badges7575 bronze badges 7

• Sure, some suggestions e to mind, like setting the selected property on the moved elements, but all we see is a bunch of serverside code that's not really relevant to the javascript at all ? – adeneo Commented Jun 17, 2013 at 12:09
• "setting the selected property on the moved elements" how? – Sanyifejű Commented Jun 17, 2013 at 12:24
• How should I know, I haven't seen any code related to the question ? – adeneo Commented Jun 17, 2013 at 12:26
• How are you moving the elements? You need to give code. – epascarello Commented Jun 17, 2013 at 12:26
• not really relevant to the javascript at all. I have no access to this javascript function. I can use it, but I am not allowed to modify it. I can write a different one, but then what should call this new function? – Sanyifejű Commented Jun 17, 2013 at 12:27

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 3

    <form name="jmxForm" onsubmit="selectAllOptions(sortedby_target)">
    ....
    </form>





function selectAllOptions(obj) {
if (!hasOptions(obj)) { return; }
for (var i=0; i<obj.options.length; i++) {
    obj.options[i].selected = true;
    }
}

Try this one UPDATED!

HTML

<select name="sortedby" multiple="multiple" id="sortedby" onchange="putvalue()">
    <option value="start">Start time</option>
    <option value="thread_id">Thread Id</option>
    <option value="user_name">Username</option>
</select>

<select name="sortedby_target" id="sortedby_target" multiple="multiple" ></select>

SCRIPT

function putvalue(){
    $('option[value="' + $('#sortedby_target').val() + '"]').prop('selected','');
    $("#sortedby_target").append('<option value="' + $('#sortedby').val() + '" selected>' + $('#sortedby').val() + '</option>');
    $("#sortedby option[value=" + $('#sortedby').val() + "]").remove();
}

I apologized for my first solution hopefully this helps.

If you want to be selected all the selected items, remove this line

$('option[value="' + $('#sortedby_target').val() + '"]').prop('selected','');

<input type="submit" onclick="selectAllOptions(sortedby_target);" />

or

<form onsubmit="selectAllOptions(sortedby_target);"></form>

You can get inspired here: http://demo.redmine/projects/asdf/issues when trying to change columns in a table.

本文标签： javascriptselect all options in html select dynamicallyStack Overflow