我的页面上有两个列表框,&我需要在javascript的帮助下在它们之间移动项目。 这是我的标记:
<asp:ListBox ID="ListBox1" Height="300px" runat="server" AppendDataBoundItems="true"
SelectionMode="Multiple"></asp:ListBox>
<div>
<asp:ImageButton ID="ButtonRight" runat="server" ImageUrl="~/Images/right.gif" OnClientClick="return
LeftToRightMoveItems('AddSetup');" /><br />
<br />
<asp:ImageButton ID="ButtonLeft" runat="server" ImageUrl="~/Images/left.gif" OnClientClick="return
RightToLeftMoveItems('AddSetup');" />
</div>
<asp:ListBox ID="ListBox2" Height="300px" runat="server" AppendDataBoundItems="true"
SelectionMode="Multiple"></asp:ListBox>
这是我的javascript代码:
使用Javascript:
function LeftToRightMoveItems() {
try {
if (status == "AddSetup") {
var varFromBox = document.getElementById("<%=ListBox1.ClientID%>").options;
var varToBox = document.getElementById("<%=ListBox2.ClientID%>").options;
}
alert(varFromBox.length);
alert(varToBox.length);
if ((varFromBox != null)) {
if (varFromBox.length < 1) {
alert('There are no items to move!');
return false;
}
if (varFromBox.options.selectedIndex == -1) // when no Item is selected the index will be -1
{
alert('Please select an item to move!');
return false;
}
while (varFromBox.options.selectedIndex >= 0) {
var newOption = new Option(); // Create a new instance of ListItem
newOption.text = varFromBox.options[varFromBox.options.selectedIndex].text;
newOption.value = varFromBox.options[varFromBox.options.selectedIndex].value;
varToBox.options[varToBox.length] = newOption; //Append the item in Target Listbox
varFromBox.remove(varFromBox.options.selectedIndex); //Remove the item from Source Listbox
}
}
}
catch (e) {
alert("Following error occured : \n" + e.description);
}
return false;
}
在页面加载时,我正在填充ListBox1
中的项目。但是在alert()
我得到了0项。
HTML看起来像:
<SELECT style="HEIGHT: 300px" id=ListBox1 multiple size=4 name=ctl00$ContentPlaceHolderNewSys$TabContainerMain$tabPanelAdd$tabContainerInnerAdd$tabPanelAdd_1$ListBoxAll1> <OPTION value=1>param1</OPTION> <OPTION value=2>param2</OPTION> <OPTION value=3>param3</OPTION></SELECT>
答案 0 :(得分:1)
该功能不接受状态参数。修改函数的签名以接受status
作为参数。
function LeftToRightMoveItems(status) {
...
}
提供状态后代码也存在一些问题。主要是当varFromBox
实际表示一组选项时varFromBox
被用作选择的事件。
例如,var varFromBox = document.getElementById("<%=ListBox1.ClientID%>").options;
最初被声明为对象数组:
varFromBox
然后在不同的地方代码尝试访问options属性,就好像options.options
是select元素一样。实际上它实际上在寻找 while (varFromBox.options.selectedIndex >= 0) {..}
function LeftToRightMoveItems(status){
if (status == "AddSetup") {
var varFromBox = document.getElementById("ListBox1").options;
var varToBox = document.getElementById("ListBox2");
}
alert(varFromBox.length);
alert(varToBox.length);
if ((varFromBox != null)) {
if (varFromBox.length < 1) {
alert('There are no items to move!');
return false;
}
console.log(varFromBox.selectedIndex);
if (varFromBox.selectedIndex == -1) // when no Item is selected the index will be -1
{
alert('Please select an item to move!');
return false;
}
for (var i = 0; i < varFromBox.length; i++) {
if (varFromBox[i].selectedIndex != -1) {
var newOption = new Option(); // Create a new instance of ListItem
newOption.text = varFromBox[i].text;
newOption.value = varFromBox[i].value;
varToBox.options[varToBox.length] = newOption; //Append the item in Target Listbox
document.getElementById("ListBox1").remove(varFromBox[i]); //Remove the item from Source Listbox
}
}
return false;
}
}
以下是我提出的否定这些问题的方法。我删除了try / catch,所以任何错误都更明显。另请查看此示例:http://jsfiddle.net/7dVyq/
{{1}}