Javascript 使用JS或JQuery,使用JQuery的listselect.JS将选择中的所有内容从一个列表移动到“selected”
我在jsp文件中有一个struts select部分,它成为标准的HTML select:Javascript 使用JS或JQuery,使用JQuery的listselect.JS将选择中的所有内容从一个列表移动到“selected”,javascript,jquery,html,Javascript,Jquery,Html,我在jsp文件中有一个struts select部分,它成为标准的HTML select: <s:select id="selectedTillsSelectId" name="selectedTillsSelectName" cssClass="tillDropDownEntryList" list="tillDropDownEntryList" lis
<s:select
id="selectedTillsSelectId"
name="selectedTillsSelectName"
cssClass="tillDropDownEntryList"
list="tillDropDownEntryList"
listKey="key"
listValue="value"
value="%{selectedTills}"
/>
多亏了一些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>
我的任务是添加一个按钮,将所有内容移动到选定列,即全选按钮
我已经添加了按钮,这可以正常工作,但我不能让它做我想要的。我可以将选项放入一个列表中,并且可以迭代地选择它们——但这所做的只是突出显示条目。我想把条目移到第二列。任何调用列表项的尝试都没有任何作用或无效,我已经尝试了在线建议中可以找到的所有排列,当您看到我的全选功能的当前状态时,这一点可能会变得很明显:请记住,我保留了注释掉的版本,主要是为了提醒我所做的尝试,但我想他们会很好地说明我的想法
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我可以调用元素上的click,但这不起作用。。。如上所述,迭代和设置selected在选择项目时确实起作用,但它只是使项目在左侧变为蓝色,而不是将其移动,如果这是一个标准的下拉列表,而不是jQuery listselect,我想这会很好
如果我错过了什么,请在评论中告诉我,以便我可以修改问题
非常感谢,,
Mitch.我不知道listselect.js是如何工作的,但要将所有选项元素从第一个select移动到第二个select,只需一行jQuery即可。只需在单击“全部移动”按钮时调用的任何函数中添加以下内容:
$("#selectedTillsSelectId").find("option").appendTo("#idOfSecondSelectHere");
演示:
我假设第二个select元素有一个id,可以包含在.appendTo.Gj=]Gtk中,我不知道appendTo。TyThank@nnnnnn-不幸的是,没有,只有一个select元素,在OP的顶部。我认为/假设所选项目的列表在引用TillDropDownEntryList的某个地方保持着。我想你会发现listselect.js可能有一些方法可以让你做你想做的事情-检查它的文档。但是在任何情况下,都必须有第二个select元素,即使它是由JS代码创建的,因此您可以通过其他方式访问它,例如,如果您知道页面上只有两个select,那么您可以像这样访问第二个:$selectedtillsselected.findoption.appendToselect:eq1.谢谢。我已经看过了我能找到的文档,但是没有用。我也试过你的建议,但没有成功。我想可能还有其他隐藏的选择,或者可能列表的显示在CSS中被覆盖,我也在研究CSS,尽管这对我的选择没有帮助。-再次感谢!看看这个:我还没有试过,但它看起来很酷。
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));
// });
}
$("#selectedTillsSelectId").find("option").appendTo("#idOfSecondSelectHere");