How to move items between two listboxes?

Question

. 。 Answers to this question are eligible for a +50 reputation bounty. T dhanunjay is looking for a . 。

    <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>

In the above code, i have the two listboxes. ie, listbox1, listbox2. Where On selecting the listboxes1 item(heading test), and selecting the btn. it has to move to the 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();
  });
});

Above is the jquery code, which I have tried. Am i attaching my codepen code here.

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

Answer 1

Your JS code is right, and also works.

You should change your HTML in select element.

Here is some code works demo .

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

Answer 2

In the HTML code, the first SELECT element has one child, an UL element. As far as I know, the children of SELECT elements are OPTION elements. You should not have an UL element inside a SELECT element.

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

Each menu option is defined by an element nested inside the <select>. [...] You can further nest <option> elements inside elements to create separate groups of options inside the dropdown.

Besides you have different elements with the same ID and there aren't OPTION elements in the code.

Probably $('#lstBox1 option:selected'); is not working as you expected because:

• the elements <select multiple="multiple" id='lstBox1'> and <ul class="tree" multiple="multiple" id='lstBox1'> have the same ID ( lstBox1 );
• there aren't OPTION elements in the HTML code ( option:selected never matches);

When I try to validate the HTML , I get those error messages (besides others):

Duplicate ID lstBox1.

From line 6, column 12; to line 6, column 61

 <ul class="tree" multiple="multiple" id='lstBox1'>

[...]

Stray start tag ul.

From line 6, column 12; to line 6, column 61

 ul class="tree" multiple="multiple" id='lstBox1'>

[...]

Text not allowed in element select in this context.

From line 8, column 70; to line 8, column 81

<a href="">heading test</a>

Content model for element select: Zero or more option, optgroup, and script-supporting elements.

Change

The UL element is not visible inside the SELECT element, at least in Firefox.

Changing the UL list to OPTION elements, the options are visible and you can move them without changing the jQuery code.

<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

I used this logic to do it and it worked well for me, just appending string to 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

i have checked your code it is working, just remove <optgroup> and <li> , make it simple like

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

Answer 5

You can achieve what you're looking for. You need to make a few changes.

Here is an example of how it should be structured and how it should behave.

<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>

You would need to write a clickLeft function as well.