JavaScript +将项目添加到下拉列表中

发布于 2024-08-28 12:51:59 字数 242 浏览 3 评论 0原文

我的 JSP 页面中有两个下拉菜单

1. lstA
     test1
     test2
     test3
     test4

2. lstB

现在选择 lstA，我想将 lstA 的所有项目填充到 lstB 中，除了选择的项目之外，lstA 的内容也应保持不变。

我怎样才能实现这个目标？

我尝试这样做，但从 lstA 中删除了一些随机项目，这非常复杂。

原文

I have two dropdowns in my JSP page

1. lstA
     test1
     test2
     test3
     test4

2. lstB

Now on selection of lstA, I want to populate all the items of lstA into lstB except the select one, also the content of lstA should remain the same.

How can I achieve this?

I tried to do it, but from lstA some random items get removed, which is quite wired.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

甜警司 2024-09-04 12:51:59

你的答案几乎是正确的。

需要注意的是：添加之前需要清除客户端列表，否则最终会出现越来越多的项目，并且在将其添加到客户端列表之前需要克隆该选项，因为节点只能存在于任何时候都有 1 位家长。

这已经过测试并且对我有用：

<html><body>
<script language="javascript">
function populateClient() {
     var serverList = document.getElementById("dropdown1");
     var clientList = document.getElementById("dropdown2");

     clientList.options.length = 0; // this removes existing options

     for (var i = 0; i <= serverList.options.length; i++) {
         if (!serverList.options[i].selected) {
             clientList.options.add(serverList.options[i].cloneNode(true)); // cloneNode here
         }
     }
 }
</script>

<select id="dropdown1" onchange="populateClient()">
    <option value="value1">value1</option>
    <option value="value2">value2</option>
    <option value="value3">value3</option>
    <option value="value4">value4</option>
    <option value="value5">value5</option>
</select>
<select id="dropdown2">
</select>
</body></html>

you almost had it correct in your answer there.

things to note : you need to clear the client list before adding, otherwise you'll end up with more and more items on it, and you need to clone the option before adding it to the client list, because a node can only exist in 1 parent at any time.

this has been tested and works for me :

<html><body>
<script language="javascript">
function populateClient() {
     var serverList = document.getElementById("dropdown1");
     var clientList = document.getElementById("dropdown2");

     clientList.options.length = 0; // this removes existing options

     for (var i = 0; i <= serverList.options.length; i++) {
         if (!serverList.options[i].selected) {
             clientList.options.add(serverList.options[i].cloneNode(true)); // cloneNode here
         }
     }
 }
</script>

<select id="dropdown1" onchange="populateClient()">
    <option value="value1">value1</option>
    <option value="value2">value2</option>
    <option value="value3">value3</option>
    <option value="value4">value4</option>
    <option value="value5">value5</option>
</select>
<select id="dropdown2">
</select>
</body></html>

回复收藏 0 原文

木落 2024-09-04 12:51:59

尝试一下

<script type="text/javascript">
    function AddItem()
    {
        // Create an Option object       
        var opt = document.createElement("option");        

        // Assign text and value to Option object
        opt.text = "New Value";
        opt.value = "New Value";

        // Add an Option object to Drop Down List Box
        document.getElementById('<%=DropDownList.ClientID%>').options.add(opt);
    }
<script />

该值将附加到下拉列表中。

Try this

<script type="text/javascript">
    function AddItem()
    {
        // Create an Option object       
        var opt = document.createElement("option");        

        // Assign text and value to Option object
        opt.text = "New Value";
        opt.value = "New Value";

        // Add an Option object to Drop Down List Box
        document.getElementById('<%=DropDownList.ClientID%>').options.add(opt);
    }
<script />

The Value will append to the drop down list.

回复收藏 0 原文

原野 2024-09-04 12:51:59

function populateClient(selectItem, clientItem) {
             var serverList = selectItem;
             for(var i = 1; i <= serverList.options.length; i++) {
                 if (!serverList.options[i].selected)
                     clientItem.options.add(serverList.options[i]);
             }
         }

其中 selectItem 和 clientItem 是下拉菜单。

当我这样做时，一些数据被随机填充到 clientItem 中，并且 selectItem 中的一些项目被删除。

function populateClient(selectItem, clientItem) {
             var serverList = selectItem;
             for(var i = 1; i <= serverList.options.length; i++) {
                 if (!serverList.options[i].selected)
                     clientItem.options.add(serverList.options[i]);
             }
         }

Where selectItem and clientItem are drop downs.

When I do this, some data is randomly populated into clientItem and some items from selectItem are removed.

回复收藏 0 原文

~没有更多了~