当前位置:编程学习 > JAVA >>

jQuery表单之Select

[javascript]
<script src="http://www.gamejzy.com/js/jquery.js" type="text/javascript"></script> 
<p> 
<select id="select1" multiple style="width:100px;height:160px;"> 
    <option value="1">选项1</option> 
    <option value="2">选项2</option> 
    <option value="3">选项3</option> 
    <option value="4">选项4</option> 
    <option value="5">选项5</option> 
    <option value="6">选项6</option> 
    <option value="7">选项7</option> 
    <option value="8">选项8</option> 
</select>      
<select id="select2" multiple style="width:100px;height:160px;"></select> 
</p> 
<p><input type="button" value="选中添加到右边" id="add_selected" /> <input type="button" value="选中删除到左边" id="remove_selected" /></p> 
<p><input type="button" value="全部添加到右边" id="add_all" /> <input type="button" value="全部删除到左边" id="remove_all" /></p> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#add_selected").bind('click', function(){ 
        $options = $("#select1 option:selected"); //获取选中的选项  
        $options.appendTo('#select2');            //追加给对方  
    }) 
    $("#remove_selected").bind('click', function(){ 
        $options = $("#select2 option:selected"); //获取选中的选项  
        $options.appendTo('#select1');            //追加给对方  
    }) 
    $("#add_all").bind('click', function(){ 
        $options = $("#select1 option");          //获取选中的选项  
        $options.appendTo('#select2');            //追加给对方  
    }) 
    $("#remove_all").bind('click', function(){ 
        $options = $("#select2 option");          //获取选中的选项  
        $options.appendTo('#select1');            //追加给对方  
    }) 
}) 
</script> 
<script src="http://www.gamejzy.com/js/jquery.js" type="text/javascript"></script>
<p>
<select id="select1" multiple style="width:100px;height:160px;">
 <option value="1">选项1</option>
 <option value="2">选项2</option>
 <option value="3">选项3</option>
 <option value="4">选项4</option>
 <option value="5">选项5</option>
 <option value="6">选项6</option>
 <option value="7">选项7</option>
 <option value="8">选项8</option>
</select>    
<select id="select2" multiple style="width:100px;height:160px;"></select>
</p>
<p><input type="button" value="选中添加到右边" id="add_selected" /> <input type="button" value="选中删除到左边" id="remove_selected" /></p>
<p><input type="button" value="全部添加到右边" id="add_all" /> <input type="button" value="全部删除到左边" id="remove_all" /></p>
<script type="text/javascript">
$(document).ready(function(){
 $("#add_selected").bind('click', function(){
  $options = $("#select1 option:selected"); //获取选中的选项
  $options.appendTo('#select2');            //追加给对方
 })
 $("#remove_selected").bind('click', function(){
  $options = $("#select2 option:selected"); //获取选中的选项
  $options.appendTo('#select1');            //追加给对方
 })
 $("#add_all").bind('click', function(){
  $options = $("#select1 option");          //获取选中的选项
  $options.appendTo('#select2');            //追加给对方
 })
 $("#remove_all").bind('click', function(){
  $options = $("#select2 option");          //获取选中的选项
  $options.appendTo('#select1');            //追加给对方
 })
})
</script>

效果图展示:

 \
作者:liruxing1715

补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,