移动select中的项到其他select中

系统管理员 2022-06-18 01:36 203阅读 0赞

情形：左边<select></select>的id=select1，右边<select></select>的id=select2，两个select中间有移动按钮，在左边select中点中一项后点击移动按钮移动一项到右边的select中

1.设置两个select的multiple="true"

<tr>  
  <td>  
  <select id="select1" name="select1" style="width:200px;height:350px;" size="20" multiple="true"></select>  
  </td>  
   
  <td> <button class="w100 mg\_t4" οnclick="moveOption('select1','select2');" >添加》</button>  
  <br>  
  <button class="w100 mg\_t8" οnclick="moveAllOption('select1','select2);" > 全部添加》》</button>  
  <br>  
  <button class="w100 mg\_t8"  οnclick="moveOption('select2','select1');" >《移除</button>  
  <br>  
    <button class="w100 mg\_t8" οnclick="moveAllOption('select2','select1');" >《《全部移除</button>  
  </td>  
  <td>  
<select id="select2" name="select2" style="width:200px;height:350px;" size="20" multiple="true"></select>  
</td>  
   <td></td>  
  </tr>

\-----------------------------------------------------------------------

function moveOption(x,y)\{  
     var objx=$("\#"+x).find("option:selected");//选中项  
     var objy=$("\#"+y).children();//另一select的children  
        if(objy.length==0)  
            $("\#"+y).append(objx);  
        var flag = true;  
        for(var j=0;j<objx.length;j++)\{  
            flag = true;  
            for(var i=0;i<objy.length;i++)\{  
                if($(objx\[j\]).val()==$(objy\[i\]).val())\{  
                    flag=false;  
                    break;  
                \}  
            \}  
            if(flag)  
                $("\#"+y).append($(objx\[j\]));  
        \}  
        $("\#"+x).find("option:selected").remove();  
  
 \}

function moveAllOption(x,y)\{  
     var objx=$("\#"+x).children();  
     var objy=$("\#"+y).children();  
        if(objy.length==0)  
            $("\#"+y).append(objx);  
        var flag = true;  
        for(var j=0;j<objx.length;j++)\{  
            flag = true;  
            for(var i=0;i<objy.length;i++)\{  
                if($(objx\[j\]).val()==$(objy\[i\]).val())\{  
                    flag=false;  
                    break;  
                \}  
            \}  
            if(flag)  
                $("\#"+y).append($(objx\[j\]));  
        \}  
        $("\#"+x).find("option:selected").remove();  
  
 \}

发表评论取消回复

表情：

评论列表（有 0 条评论，203人围观）

还没有评论，来说两句吧...

相关阅读

相关 JQuery中对Select的option项的添加、删除、取值

JQuery中对Select的option项的添加、删除、取值 jQuery获取Select选择的Text和Value: jQuery添加/删除Select的

比眉伴天荒/ 2023年10月18日 12:32/ 0 赞/ 30 阅读

相关 HTML+JS实现左边select移动到右边select

如图所示：左右两个select标签，左边有10个option，要求实现双击左侧选项即可移动到右侧，选择选项后点击“批量右移”可以移动到右侧，点击“全部右移”则全部一次性右移

灰太狼/ 2023年10月18日 09:39/ 0 赞/ 229 阅读

相关 Oracle中select 1和select *的区别

转自：[https://www.linuxidc.com/Linux/2010-05/26202.htm][https_www.linuxidc.com_Linux_2010-

- 日理万妓/ 2023年10月09日 09:52/ 0 赞/ 155 阅读

相关 matlab中selection,Data Selection

Selecting Data to Fit in Curve Fitting App To select data to fit, use the drop-down lis

蔚落/ 2023年01月15日 05:55/ 0 赞/ 248 阅读

相关 select 中option的使用以及动态增加select

<html> <head> <SCRIPT LANGUAGE="JavaScript"> <!-- //oSelect 列表的底部添加了一个新选项 func

落日映苍穹つ/ 2022年09月17日 12:17/ 0 赞/ 952 阅读

相关 HTML中select的option设置selected=“selected“无效的解决方案

HTML中select的option设置selected="selected"无效的解决方案参考文章： [（1）HTML中select的option设置selected=

约定不等于承诺〃/ 2022年09月08日 15:49/ 0 赞/ 112 阅读

相关 select中option改变时跳转到其他页面

html代码： <div class="friend\_link"> <select οnchange=mbar(this

朱雀/ 2022年08月05日 20:29/ 0 赞/ 393 阅读

相关移动select中的项到其他select中

情形：左边<select></select>的id=select1，右边<select></select>的id=select2，两个select中间有移动按钮，在左边sele

系统管理员/ 2022年06月18日 01:36/ 0 赞/ 204 阅读

相关 iview中select的使用

待完善 [参考][Link 1] option绑定值和显示值问题 <FormItem label="区域" prop="DistrictId">

约定不等于承诺〃/ 2022年04月24日 10:06/ 0 赞/ 552 阅读

相关 Oracle中select 1和select *的区别

转： [Oracle中select 1和select \的区别][Oracle_select 1_select] 转自：[https://www.linuxidc.co

「爱情、让人受尽委屈。」/ 2021年10月29日 12:36/ 0 赞/ 477 阅读