尝试将列表数据放入另一个列表

Trying to put list data into another list

本文关键字：列表 另一个 数据      更新时间：2023-09-26

在下面的程序中，我正在使用费用头ID并尝试访问动态数据，但是当我选择或单击第一个列表的任何元素时，它不会转到下一个列表。单击第一个列表中的任何元素后，该元素应从第一个列表中消失并显示在第二个列表中。我正在使用一个在JS和JSP中具有内置类的主题。

<div class="panel-body">
    <div class="form-group">
        <div class="col-lg-12">
            <div class="leftBox">
                <select id="feesHeads" multiple="multiple" class="multiple nostyle form-control" style="height:300px;">
                <!--     <option value="1">Spain</option>
                    <option value="2">Germany</option>
                    <option value="3">Uruguay</option>
                    <option value="4" selected="selected">Brazil</option>
                    <option value="5" selected="selected">England</option>
                    <option value="6" selected="selected">Portugal</option>
                    <option value="7">Argentina</option>
                    <option value="8">Italy</option>
                    <option value="9">Croatia</option>
                    <option value="10">Denmark</option>
                    <option value="11">Russia</option>
                    <option value="12">Greece</option>
                    <option value="13">Chile</option>
                    <option value="14">Côte d'Ivoire</option>
                    <option value="15" selected="selected">France</option>
                    <option value="16">Sweden</option>
                    <option value="17">Switzerland</option>
                    <option value="18">Republic of Ireland</option>
                    <option value="19">Australia</option>
                </select> --> 
                <br/>
                <span id="box1Counter" class="count"></span>
                <div class="dn"><select id="box1Storage" name="box1Storage" class="nostyle"></select></div>
            </div>
            <div class="dualBtn">
                <button id="to2" type="button" class="btn" ><span class="icon12 minia-icon-arrow-right-3"></span></button>
                <button id="allTo2" type="button" class="btn" ><span class="icon12 iconic-icon-last"></span></button>
                <button id="to1" type="button" class="btn marginT5"><span class="icon12 minia-icon-arrow-left-3"></span></button>
                <button id="allTo1" type="button"class="btn marginT5" ><span class="icon12 iconic-icon-first"></span></button>
            </div>
            <div class="rightBox">
                <select id="box2View" multiple="multiple" class="multiple nostyle form-control" style="height:300px;"></select>
                <br/>
                <span id="box2Counter" class="count"></span>
                <div class="dn"><select id="box2Storage" class="nostyle"></select></div>
            </div>
        </div>
    </div><!-- End .form-group  -->
</div>
</div><!-- End .panel -->
</div><!-- End .span6 -->
</div><!-- End .row -->

当您单击第一个列表的选项时，将其从那里删除并将其附加到第二个列表。我创建了一个可能适合你的方案的简单演示。

.HTML： 

First :
<select id="firstList">
    <option>Mango</option>
    <option>Banana</option>
    <option>Apple</option>
</select>
<br />
Second
<select id="secondList"></select>

j查询 ：

$("#firstList").on("change", function(){
    var selectedItem = $(this).children("option:selected").val();
    $(this).children("option:selected").remove();
    $("#secondList").append($("<option> </option>").text(selectedItem));
});

js小提琴

注意：这只是如何实现它的概述。但你想要什么完全取决于你。

相关文章：