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的所有内容都应默认标记为已选中。有什么想法吗？

UPDATE！我有一个可以选择所有元素的函数：

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

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

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

如果您想要选择所有选定的项目，请删除此行

$('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 尝试更改表格中的列时。

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

3 个答案: