javascript - 如何在两个列表框之间移动元素？

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>

在上面的代码中，我有两个列表框。即列表框 1、列表框 2。在选择 listboxes1 元素(标题测试)并选择 btn 的位置。它必须移动到列表框 2。

$(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。

这是一些代码作品 demo .

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