Question

在下面的程序中，我使用费用头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 -->

Answer 1

当您单击firstList的选项时，将其从那里删除并将其附加到secondList。我已经创建了一个可能与您的场景一起使用的简单演示。

HTML：

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

jQuery：

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

jsFiddle

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

试图将列表数据放入另一个列表中

1 个答案: