解决:ListBox 控件在客户端用脚本添加删除项时,后台得不到修改后的数据

最新推荐文章于 2021-01-18 14:23:57 发布

bobyzong

最新推荐文章于 2021-01-18 14:23:57 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： asp.net 文章标签：脚本 server asp javascript 服务器 button

本文链接：https://blog.youkuaiyun.com/bobyzong/article/details/1860158

asp.net 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用JavaScript控制两个ListBox控件数据双向移动的方法，并通过隐藏域保存更改后的数据，确保服务器端能够获取更新后的ListBox值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近做项目时遇到如题的问题:
页面上有2个ListBox控件 ListBox控件中间是2个左移,右移按钮,就是实现把2个 listbox 控件中的项左右移动,
为减少与服务器交互的次数,采用 javascript 脚本来控制移动, 但是这样控制以后,提交到服务器端却怎么也得不到移动数据后的实际值, 2个listbox的值和开始加载时的一样,根本改变, 不知道是什么原因, 网上有说各种原因的,我也不知道对不对,也许是自己水平有限吧, 我自己琢磨了一下,可以利用隐藏域来保存修改,然后在服务器端得到隐藏域里的value,以下是我写的客户端的代码

function SelectOne()

{

var listBox1=window.document.getElementById("listBox1");

var lstindex=listBox1.selectedIndex;

if(lstindex<0)

return;

var v = listBox1.options[lstindex].value;

var t = listBox1.options[lstindex].text;

var listBox2=window.document.getElementById("listBox2");

listBox2.options[listBox2.options.length] = new Option(t,v,true,true);

var hid = document.getElementById("hid");

hid.value += t + "-" + v + "|";

listBox1.remove(lstindex);

}

</script>

</head>

<body>

<div>

<asp:ListBox ID="listBox1" runat="server">

</asp:ListBox>

<asp:ListBox ID="listBox2" runat="server">

</asp:ListBox>

</div>

<asp:Button ID="save" runat="server" OnClick="save_Click" />

</form>

</body>

</html>

我将选中的值组合成: key1 - value1 | key2 - value2 | key3 - value3 的形式保存在hid隐藏控件的 value 上,
然后在服务器端可以取出 hid 控件的 value 值 ,再按 "|" 进行 split 后得到键/值对的数组 ,
然后再按 "-" 符号 split ,取出 key 和 value 保存在一个 hashtable 中,
注意: 保存进 hashtable 的时候判断如果 key 已经存在则从 hashtable 中删除此键/值对,如不存在则添加
进 hashtable 中, 这样可以清除掉 hid 控件的value值中的重复项( 以上代码是无论添加项还是移除项总是在 hid
控件的 value 值上追加键/值对)