用javaScript兑现两个复选框之间选项的移动和提交目标框中的选项-JavaSript-爱易网页

用javaScript兑现两个复选框之间选项的移动和提交目标框中的选项

日期：2014-05-16　浏览次数：20414 次

用javaScript实现两个复选框之间选项的移动和提交目标框中的选项
用javaScript实现两个复选框之间选项的移动和提交目标框中的选项

HTML的写法

view plain
<select size="10" multiple="multiple" id="allChoices">
         <option value="1">tom</option>
         <option value="2">jim</option
         <option value="3">kate</option>
</select>
<input type="button" value="添加" id="inbutton"/>
<input type="button" value="移除" id="outbutton"/>
<select size="10" multiple="multiple" id="target"></select>
<div>
    <input type="submit" class="button" value="保存"/>
        <input type="hidden" id="selectedvalues" value=""/>

</div>

实现复选框之间选项的移动

思路：当点击添加时，会触发对第一个复选框中选中状态的option循环，依次添加到另一个复选框中，点击移除时同理

view plain
$(document).ready(function(){
    $("#inbutton").click(function(){
        $("#allChoices option:selected").each(function(){
            $("#target").append($(this));
        });
    });
    $("#outbutton").click(function(){
        $("#target option:selected").each(function(){
            $("#allChoices").append($(this));
        });
    });
});

那么如何将选中的option的诸值向后台传递呢？

个人认为有两种思路：

①用隐藏域监听移动的操作，最后提交隐藏域的值

view plain
$(document).ready(function(){



        $("#inbutton").click(function(){
            $("#allChoices option:selected").each(function(){
                $("#hiddenUser").val($("#hiddenUser").val()+","+$(this).val());
                $("#selectuser").append($(this));
            });

            var v = $("#hiddenUser").val();
            if(v.indexOf(',')==0) {
                v=v.substring(1,v.length);
            }
            $("#hiddenUser").val(v);//获得的结果形如1,2,3

        });

        $("#outbutton").click(function(){
            $("#selectuser option:selected").each(function(){&n

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

用javaScript兑现两个复选框之间选项的移动和提交目标框中的选项

相关资料更多>

推荐阅读更多>