选择 HTML 中的所有选项 选择“动态”

select all options in html select dynamically

本文关键字：选择 动态 选项 HTML      更新时间：2023-09-26

我在一个表单中有两个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或类似的东西。

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

试试这个更新！

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

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

或

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

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

相关文章：