js 多选框

最新推荐文章于 2021-10-08 14:59:29 发布

weixin_34343308

最新推荐文章于 2021-10-08 14:59:29 发布

阅读量126

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/WvTKXOU/blog/464530

本文介绍了一个在线表格，用户可以使用下拉菜单选择日期范围，并通过点击按钮应用筛选条件。用户可以选择星期进行筛选，同时可以对筛选结果进行保存。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

<form name="form1" action="#"   onsubmit="return check(this);">
  <table class="con_list" width="670" border="0" cellspacing="0"
   cellpadding="0">
   
  
   <tr>
    <td width="80" id="sshu">星期：</td>
    <td colspan="4" valign="middle"><select  name="wxcs"  multiple="true" ondblclick="move(document.form1);"
     size="10"   style="width:150px; ">
       <option value="1">星期一</option>
       <option value="2">星期二</option>
       <option value="3">星期三</option>
       <option value="4">星期四</option>
       <option value="5">星期五</option>
       <option value="6">星期六</option>
       <option value="7">星期七</option>
       <option value="8">全部</option>
    </select>
    <input type="button" value="-->" name="selectCat" onClick="moveAll(document.form1);"/>
    <input type="button" value="<--" name="selectCat" onClick="dele(document.form1);"/>
         <select multiple="true" name="sxcs"   size="10"   style="width:150px; " ondblclick="dele(document.form1)">
    </td>
   </tr>
   
   <tr>
   <td width="80">
    <a class="baocun" href="javascript:dotijiao(document.form1);">确定</a>
   </td>
   <td width="80"><a class="quxiao"
    href="${basePath}doctor/info.html">返回</a>
   </td>
   <td width="148">&nbsp;</td>
   <td width="396">&nbsp;</td>
  </tr>
  </table>
</form> 
<script language="javascript">
function move(cs){
var addflag = true;
var fl = cs.wxcs.selectedIndex;
var item = new Option(cs.wxcs.options[fl].text,cs.wxcs.options[fl].value);
//判断右列表是否已经存在所选信息
for(var x = 0 ; x <cs.sxcs.options.length; x++){
    if (cs.sxcs.options[x].value == cs.wxcs.options[fl].value){//如果右列表中的值等于左列表的值
     addflag = false;
     }
             }
         //添加未存在在右边列表的信息
       if(addflag){     
       cs.sxcs.options[cs.sxcs.options.length] = item;
       }
   }
 
   function moveAll(cs){
   var addflag;
var fl = cs.wxcs.selectedIndex;
for(var i = 0 ; i <cs.wxcs.options.length; i++){//循环左框所有值对象
addflag = true; 
if(cs.wxcs.options[i].selected){//判断值是否被选中
//判断右列表是否已经存在所选信息
for(var x = 0 ; x <cs.sxcs.options.length; x++){
    if (cs.sxcs.options[x].value == cs.wxcs.options[i].value){//如果右列表中的值等于左列表的值
     addflag = false;
     }
             }
         //添加未存在在右边列表的信息
       if(addflag){      
       cs.sxcs.options[cs.sxcs.options.length] = new Option(cs.wxcs.options[i].text,cs.wxcs.options[i].value);
       }
       }
       }
   }
 
function dele(cs){
      var sp=cs.sxcs.selectedIndex;//当前选择的位置编号
      var so = cs.sxcs.options[sp];//获得sp位置编号的值对象
      cs.sxcs.remove(so);//移除此框中的值对象
      //定位,当选择的位置为不是最后一个,则位置不动.否则上移.
    if (cs.sxcs.options.length>sp) {
    sp = sp;
      } else {
    sp = sp-1;
      }
   }
function check(frm) {
     if(frm.sxcs.length < 0){
     alert("请选择参数");
     return false;
     }
     for (x = 0 ; x < frm.sxcs.length ; x++ ){
     frm.sxcs.options[x].selected = "true";   
     }
    }
    </script>
    <script type="text/javascript">
    for(var x = 0 ; x <cs.sxcs.options.length; x++){
   if(x>0){
   week+=","+cs.sxcs.options[x].value;
   }else{
   week+=cs.sxcs.options[x].value;
   }
   alert("week"+week);
             }
     </script>

转载于:https://my.oschina.net/WvTKXOU/blog/464530