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

Posted 2023-02-22

【中文标题】选择html中的所有选项动态选择

【英文标题】：select all options in html select dynamically

【发布时间】：2013-06-13 09:08:21

【问题描述】：

我在一个表单中有两个 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;
    

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

select 中应该有类似onfill 或类似的东西。

【问题讨论】：

当然，我想到了一些建议，比如在移动的元素上设置 selected 属性，但我们看到的只是一堆与 javascript 完全不相关的服务器端代码？

“在移动的元素上设置选中的属性”如何？

我怎么知道，我没有看到任何与问题相关的代码？

你是如何移动元素的？你需要给代码。

与 javascript 完全不相关。我无法访问此 javascript 函数。我可以使用它，但我不能修改它。我可以写一个不同的，但是这个新函数应该叫什么？

【参考方案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;
    

【参考方案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','');

【讨论】：

这个函数应该怎么调用？

【参考方案3】：

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

或

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

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