如何在两个列表框之间移动项目？

Question

    <div class="data_wrap list-padding">
    <div class="approveTermsContainer">
        <div class="newItems"> <b>send</b>
            <br />
            <select multiple="multiple" id='lstBox1'>
                    <ul class="tree" multiple="multiple" id='lstBox1'>
                <li>
                    <div class="btn-group" data-toggle="buttons"> </div> <a href="">heading test</a>
                    <ul>
                        <li>
                            <div class="btn-group" data-toggle="buttons"> </div> test <span rel="tooltip" data-toggle="tooltip" data-trigger="hover" data-placement="right" data-html="true" data-title="This is my tooltip!"><i class="fa fa-info-
circle"></i></span> </li>
                    </ul>
                </li>
            </ul>
      </select>
        </div>
        <div class="transferBtns">
            <input type='button' id='btnRight' value='  >  ' />
            <br />
            <input type='button' id='btnLeft' value='  <  ' /> </div>
        <div class="approvedItems"> <b>receive</b>
            <br />
            <select multiple="multiple" id='lstBox2'> </select>
        </div>
    </div>
</div>

在上面的代码中，我有两个列表框。 即，listbox1，listbox2。 在哪里选择 listboxes1 项目（标题测试），然后选择 btn。 它必须移动到listbox2。

$(document).ready(function () {
  $('#btnRight').click(function (e) {
    var selectedOpts = $('#lstBox1 option:selected');
    if (selectedOpts.length == 0) {
      alert("Nothing to move.");
      e.preventDefault();
    }

    $('#lstBox2').append($(selectedOpts).clone());
    $(selectedOpts).remove();
    e.preventDefault();
  });

  $('#btnLeft').click(function (e) {
    var selectedOpts = $('#lstBox2 option:selected');
    if (selectedOpts.length == 0) {
      alert("Nothing to move.");
      e.preventDefault();
    }

    $('#lstBox1').append($(selectedOpts).clone());
    $(selectedOpts).remove();
    e.preventDefault();
  });
});

上面是jquery代码，我试过了。 我在这里附上我的codepen代码吗？

https://codepen.io/dhanunjayt/pen/GRxMpBX

Answer 1

您的 JS 代码是正确的，并且也有效。

您应该更改 select 元素中的 HTML 。

这是一些代码作品演示。

<select multiple id='lstBox1'>
   <option value="1">foo</option>
   <option value="2">bar</option>
</select>

Answer 2

在 HTML 代码中，第一个 SELECT 元素有一个子元素，即 UL 元素。 据我所知，SELECT 元素的子元素是 OPTION 元素。 SELECT 元素内不应有 UL 元素。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select ：

每个菜单选项都由嵌套在 <select> 中的元素定义。 [...] 您可以在元素内进一步嵌套 <option> 元素，以在下拉菜单中创建单独的选项组。

此外，您有具有相同 ID 的不同元素，并且代码中没有 OPTION 元素。

可能$('#lstBox1 option:selected'); 没有按预期工作，因为：

元素<select multiple="multiple" id='lstBox1'>和<ul class="tree" multiple="multiple" id='lstBox1'>具有相同的 ID ( lstBox1 )；
HTML 代码中没有 OPTION 元素（ option:selected从不匹配）；

当我尝试验证 HTML时，我收到了这些错误消息（除了其他错误消息）：

重复 ID lstBox1。

从第 6 行第 12 列开始； 到第 6 行第 61 列
 <ul class="tree" multiple="multiple" id='lstBox1'>
[...]

杂散开始标记 ul。

从第 6 行第 12 列开始； 到第 6 行第 61 列
 ul class="tree" multiple="multiple" id='lstBox1'>
[...]

在此上下文中，元素 select 中不允许出现文本。

从第 8 行第 70 列开始； 到第 8 行第 81 列
<a href="">heading test</a>
元素 select 的内容 model：零个或多个选项、optgroup 和脚本支持元素。

改变

UL 元素在 SELECT 元素内部不可见，至少在 Firefox 中是不可见的。

将 UL 列表更改为 OPTION 元素，选项是可见的，您可以在不更改 jQuery 代码的情况下移动它们。

<div class="data_wrap list-padding">
    <div class="approveTermsContainer">
        <div class="newItems"> <b>send</b>
            <br />
        <select multiple="multiple" id='lstBox1'>
            <optgroup label="heading test">
                <option value="test">test</option>
            </optgroup>
        </select>
        </div>
        <div class="transferBtns">
            <input type='button' id='btnRight' value='  >  ' />
            <br />
            <input type='button' id='btnLeft' value='  <  ' /> </div>
        <div class="approvedItems"> <b>receive</b>
            <br />
            <select multiple="multiple" id='lstBox2'> </select>
        </div>
    </div>
</div>

Answer 3

我使用这个逻辑来做到这一点，它对我来说效果很好，只需将字符串附加到 select "<option>your selected option</option>"

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>     
    </head>
    <body>
       <select id="l1">
        <option value="1">1</option>
        <option value="2">2</option>
       </select>
       <input type="button" id="btn" value="click">
       <select id="l2"></select>
    </body>
</html>
<script>
    $("#btn").click(function(){
        debugger;
        value = $("#l1").find(":selected").attr('value');
        var appends='<option value="' +value + '">' + value + '</option>';
        $("#l2").empty();
        $("#l2").append(appends);
    })
 </script>

Answer 4

我检查了你的代码它正在工作，只需删除<optgroup>和<li> ，让它变得简单

<select multiple="multiple" id='lstBox1'>
     <option value="test">test</option>
     <option value="test2">test2</option>
     <option value="test3">test3</option>
</select>

Answer 5

你可以实现你正在寻找的东西。 您需要进行一些更改。

这是一个应该如何构建以及应该如何表现的示例。

<select multiple id="list_1">
    <option id="option_a">Option A</option>
    <option id="option_b">Option B</option>
    <option id="option_c">Option C</option>
</select>
<select multiple id="list_2">
    //
</select>
<script>
    function clickRight() {
        var list = document.querySelector("#list_1").children;
        var numOptions = list.length;
        for (var i = 0; i < numOptions; i++) {
            var option = list[i];
            if (option.selected) {
                document.querySelector("#list_2").appendChild(list.splice(i, 1));
                numOptions—;
                i—;
            }
        }
    }
</script>

您还需要编写clickLeft function。

如何在两个列表框之间移动项目？

问题描述

5 个解决方案

解决方案1
0 2022-08-01 16:19:52

解决方案2
0 2022-08-01 16:22:56

改变

解决方案3
0 2022-08-02 08:44:39

解决方案4
0 2022-08-03 04:36:12

解决方案5
0 2022-08-08 06:53:14

如何在两个列表框之间移动项目？

问题描述

5 个解决方案

解决方案1 0 2022-08-01 16:19:52

解决方案2 0 2022-08-01 16:22:56

改变

解决方案3 0 2022-08-02 08:44:39

解决方案4 0 2022-08-03 04:36:12

解决方案5 0 2022-08-08 06:53:14

解决方案1
0 2022-08-01 16:19:52

解决方案2
0 2022-08-01 16:22:56

解决方案3
0 2022-08-02 08:44:39

解决方案4
0 2022-08-03 04:36:12

解决方案5
0 2022-08-08 06:53:14