select all options in html select dynamically

Question

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.

Answer 1

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

Answer 2

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','');

Answer 3

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

or

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

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