实现动态页面传值 options动态显示数据

最新推荐文章于 2022-07-24 21:48:01 发布

lee576

最新推荐文章于 2022-07-24 21:48:01 发布

阅读量1.7k

点赞数

分类专栏： JavaScript 文章标签： class function stylesheet javascript button border

JavaScript 专栏收录该内容

128 篇文章 0 订阅

订阅专栏

href="../css/index.css" rel="stylesheet" type="text/css">

选择组	未选人员	已选人员

 
 
<html>
<head>
<title>
Vol_Outlay_ChooseSure
</title>
<link href="../css/index.css" rel="stylesheet" type="text/css"/>
</head>
<body bgcolor="#ffffff" onLoad="removeOption(SelectedItem);">
<table width="80%" height="47%" border="1" cellpadding="0" cellspacing="0" align="center">
        <tr>
          <td width="25%" height="34" align="right" valign="bottom" class="text">选择组</td>
    <td width="12%" height="34" align="right" valign="bottom" class="text"> </td>
          <td width="%" height="34" align="center" valign="bottom" class="text">未选人员</td>
    <td width="12%"> </td>
          <td width="25%" valign="bottom" class="text">已选人员</td>
        </tr>
        <tr><td> </td><td> </td>
  
          <td height="162" align="" valign="top">
            <select name="SelectedItem" style="width:100%" id="SelectedItem" size="12" multiple="true">
              <option>姚明</option>
              <option>刘翔</option>
            <option>李小双</option>
              <option>刘德华</option>
            <option>黎明</option>
              <option>张学友</option>
            <option>王晶</option>
              <option>张艺谋</option>
            <option>郑秀文</option>
              <option>杰克逊</option>
           
               
            
            </select>
          </td>
          <td  align="center" valign="top"><br/>
            <br/>
            <br/>
            <br/>
            <button onClick="MoveSingleItem(WaitSelectItem, SelectedItem)" class="bn"><<</button>
            <br/>
            <br/>
            <br/>
            <button onClick="MoveSingleItem(SelectedItem, WaitSelectItem)" class="bn">>></button></td>
          <td valign="top"><select name="WaitSelectItem" style="width:100%" size=12 multiple="true">
            </select></td>
        </tr>
  <tr>
   <td align="center" colspan="5"> </td>
  </tr>
 
  <tr>
   <td align="center" colspan="5">
   <input type="button" name="chooseOk" class="bn" value="确 定" onClick="re(WaitSelectItem);"/>   
      <input type="button" name="reset" class="bn" value="取 消" onClick="javascript:window.close();"/></td>
  </tr>
      </table>
</body>
</html>
<script language="javascript" type="text/javascript">
   function MoveSingleItem(sel_source, sel_dest){
     if (sel_source.selectedIndex==-1){
       if(sel_source.options.length>0){
      var SelectedText = sel_source.options[sel_source.options.length-1].text;
    var objItemValue = sel_source.options[sel_source.options.length-1].value;
       sel_source.options.remove(sel_source.options.length-1);
           sel_dest.options.add(new Option(SelectedText,objItemValue));
    }
  }else{
   for(var i = sel_source.options.length-1; i >= 0; i--){
   if (sel_source.options[i].selected == true) {
    var SelectedText = sel_source.options[i].text;
    var objItemValue = sel_source.options[i].value;
    sel_source.options.remove(i);
    sel_dest.options.add(new Option(SelectedText,objItemValue));
   }
    }
   }
   }
   function re(sel_dest){
     window.returnValue=getSelectedValue(sel_dest);
  window.close();
   }
   function getSelectedValue(sel_dest){
     var arr = new Array();
     for(var i = sel_dest.options.length-1; i >= 0; i--){
   arr[i] = sel_dest.options[i].value;
  }
  return arr;
   }
   function removeOption(sel){
    sel.options.remove(0);
   }
</script>
 