javascript - 选择html中的所有选项动态选择

Question

我在一个表单中有两个 HTML 选择。第一个被调用available并包含几个选项：

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

第二个被调用yourselection并且一开始是空的：

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

有一个按钮可以从 中删除选定的选项available并将它们移动到yourselection。

此按钮从我可以使用但无法修改的库中调用 JavaScript 函数。

基本上它工作正常。但是有一个小不便：当用户将一个或多个选项从 移动available到yourselection时，默认情况下“到达时”不会选择它们。所以目前用户必须先选择一个选项而available不是将其移动到yourselection，然后再次手动选择它yourselection，然后提交表单。

我想要的是所有到达的东西都yourselection应该默认标记为选中。有任何想法吗？

更新！我有一个可以选择所有元素的功能：

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

但问题是如何称呼它？出于这个原因，我不想添加另一个按钮。

在选择中应该有类似onfill或类似的东西。

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

试试这个更新！

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>

脚本

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

我为我的第一个解决方案道歉，希望这会有所帮助。

如果要选中所有选中的项目，去掉这一行

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

Answer 3

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

或者

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

尝试更改表中的列时，您可以在这里获得启发： http ://demo.redmine.org/projects/asdf/issues。