javascript - 使用 JS 或 JQuery，使用 jQuery 的 listselect.js 将选择中的所有内容从一个列表移动到 "selected"

Question

我在 jsp 文件中有一个 struts 选择部分，它变成了标准的 HTML 选择:

        <s:select
            id="selectedTillsSelectId"
            name="selectedTillsSelectName"
            cssClass="tillDropDownEntryList"
            list="tillDropDownEntryList"
            listKey="key"
            listValue="value"
            value="%{selectedTills}"
            />

变成

<select name="selectedTillsSelectName" id="selectedTillsSelectId" class="tillDropDownEntryList">
  <option value="1">0001</option>
  <option value="2">0002</option>
  <option value="3">0003</option>
  <option value="4">0004</option>
  <option value="5">0005</option>
  <option value="6">0006</option>
  <option value="7">0007</option>
  <option value="8">0008</option>
</select>

我的理解是 struts 只是填充列表，从那时起可能会忘记 struts 参与其中。

然后这将显示为拆分列表

All              Selected
0001             
0002
0003
0004
0005
0006
0007
0008

感谢一些 listselect jquery:

<script type="text/javascript" src="<s:url value="/js/jQuery/jquery-1.4.2.min.js"/>"></script>
<script type="text/javascript" src="<s:url value="/js/jQuery/listselect.js"/>"></script>

这是我被要求修改的所有预先存在的工作代码。当您单击左侧的单个项目时，它会移动到右侧的“已选择”列中。点击 0003 结果:

All              Selected
0001             0003
0002
0004
0005
0006
0007
0008

我的任务是添加一个按钮，将所有内容移动到所选列，即“全选”按钮。

我已经添加了按钮，这工作正常，但我无法让它做我想做的事。我可以将选项放入列表中，我可以迭代地“选择”它们——但这所做的只是突出显示条目。我实际上想将条目移动到第二列。任何调用列表项上的单击的尝试都没有执行任何操作或无效，我已经尝试了我可以在在线建议中找到的所有排列，当您看到我的“全选”功能的当前状态时，这可能会变得很明显:(请记住，我保留注释掉的版本主要是为了帮助提醒我我尝试过的内容，但我认为它们会很好地表明我已经尝试过的内容)

function selectAllTills() 
{
//    alert("Select all the Tills..."); 
    var bothLists = document.getElementsByTagName("select");
    var unselectedList = bothLists[0];
    var selectedList = bothLists[1];
    var allOptions = unselectedList.getElementsByTagName("option");
    for (var i=0; i < allOptions.length; i++) {
//            allOptions[i].selected = true;
//      allOptions[i].attr('selected', 'selected');
//      allOptions[i].selected = true;
//      $("#selectedTills").val(i).attr("selected","selected");
//      alert("allOpions is" + allOptions[i]);
//      selectedList.val(allOptions[i]);
      $("#selectedTillsSelectId").val(allOptions[i]);
    }

//    $("#selectedTillsSelectId").find("option").appendTo(".tillDropDownEntryList"); //tried based on nnnnnn's suggestion

//    $("div#tillSelectionDiv select option").each(function(){
//        $(this).attr("selected","selected");
//      $(this).trigger("click");
//      $(this).click();
//      alert($(this));
//    });

}

我想正是在这一点上，我承认此时并没有真正使用 javascript。我是一名 Java 程序员，所以了解 OOP，我可以阅读我在页面中看到的大部分内容，这很有意义。 Firebug 建议我正在迭代的项目是 HTMLElementOption 听起来不错，并且使用 jQuery 据说我可以在元素上调用“单击”但这没有用......如上所述，迭代和设置选择 确实在选择项目时起作用，但它只是使左侧的项目变成蓝色而不是将其移到上方，我想如果这是一个标准的下拉列表而不是 jQuery listselect 就没问题了。

收到的任何帮助，如果我遗漏了什么，请在评论中告诉我，以便我修改问题。

非常感谢，米奇。

Answer 1

我不知道 listselect.js 是如何做的，但是要从字面上将所有选项元素从第一个选择移动到第二个选择，您可以使用一行 jQuery 来完成。单击“全部移动”按钮时，只需将以下内容放入您调用的任何函数中:

$("#selectedTillsSelectId").find("option").appendTo("#idOfSecondSelectHere");

演示:http://jsfiddle.net/AHn7Z/

我假设第二个选择元素有一个 id，您可以将其包含在 .appendTo() 中。