欢迎光临
我们一直在努力

俺的小作品:根据下拉列表动态在列表框中显示,并实现2个列表框互斥选择

建站超值云服务器,限时71元/月

具体功能用一下就知道了,在下拉框中选择一个,左边的列表框就显示相应的值,点那4个按钮能够实现左右2个列表框选项互相排斥,很好玩的。。估计大家开发的时候经常要用到,所以就帖上来了。

代码如下:
<style>
td,select,input{font-size:9pt}
</style>
<script>
var subcat = new array();                                      //  下拉列表数组定义
    subcat[0] = new array("计划采购员b","2","cs101");
    subcat[1] = new array("仓库管理员b","2","cs111");
    subcat[2] = new array("仓库管理员","1","111");
    subcat[3] = new array("门市管理员","1","122");
    subcat[4] = new array("计划审批员","1","master");
    subcat[5] = new array("计划审批员b","2","cs100");
    subcat[6] = new array("计划采购员","1","103");
    subcat[7] = new array("统计员","1","李尚英");
    subcat[8] = new array("统计员b","2","cs133");
                                                        //   这个数组可以根据实际需要用程序继续添加元素
var onecount=subcat.length;
var c=0;d=0;                                            //     2个select的optoins的索引位置…

function moveto2(fn,s1,s2)                                //     ">>" button function
{
    fs1=eval(fn+"."+s1);                                //      formname1.selectname1
    fs2=eval(fn+"."+s2);
    d=fs2.options.length;
    for(i=0;i<fs1.options.length;i++)
        {
            var myoption = new

            option(fs1.options[i].innertext,fs1.options[i].value);  

            fs2.options[d]=myoption ;
            fs2.options[d].selected=true;
            fs1.options[i].selected=true;
            d++;
        }
    k=0;
    while(k<fs1.options.length)
        {
            fs1.remove(k);
            c–;
        }
}

function moveto1(fn,s1,s2)    //    "<<" button
{
   fs1=eval(fn+"."+s1);
   fs2=eval(fn+"."+s2);
   c=fs1.options.length;
   for(i=0;i<fs2.options.length;i++)
      {
            var myoption = new

            option(fs2.options[i].innertext,fs2.options[i].value);  

            fs1.options[c]=myoption ;
            fs1.options[c].selected=true;
            fs2.options[i].selected=true;
            c++;
      }
   k=0;
   while(k<fs2.options.length)
        {
            fs2.remove(k);
            d–;
        }
}

function move1to2(fn,s1,s2)    //      ">" button
{
    fs1=eval(fn+"."+s1);
    fs2=eval(fn+"."+s2);
    c=fs1.options.length;
    d=fs2.options.length;
    for(i=0;i<fs1.options.length;i++)
        {
            if(fs1.options[i].selected)
                {    
                    var myoption = new
option(fs1.options[i].innertext,fs1.options[i].value);  

                    fs2.options[d]=myoption ;
                    fs2.options[d].selected=true;
                    d++;
                }
        }
    k=0;
    while(k<fs1.options.length+3)                             //   这里为什么要+3,我也不知道
        {
            del(fn,s1,s2);
            k++;
        }
}

function del(fn,s1,s2)                                         //   删除选择的列表项目
{
    fs1=eval(fn+"."+s1);
    fs2=eval(fn+"."+s2);
    for(i=0;i<fs1.options.length;i++)
        {
            if(fs1.options[i].selected)
                {    
                    fs1.remove(i);
                    c–;
                }
        }
}

function move2to1(fn,s1,s2)    //       "<" button
{   
      fs1=eval(fn+"."+s1);
    fs2=eval(fn+"."+s2);
    c=fs1.options.length;
    for(i=0;i<fs2.options.length;i++)
        {
            if(fs2.options[i].selected)
                {    
                    var myoption = new
option(fs2.options[i].innertext,fs2.options[i].value);  

                    fs1.options[c]=myoption ;
                    fs1.options[c].selected=true;
                    c++;
                }
        }
    k=0;
    while(k<fs2.options.length+3)
        {
            del1(fn,s1,s2);
            k++;
        }
}

function del1(fn,s1,s2)
{
    fs1=eval(fn+"."+s1);
    fs2=eval(fn+"."+s2);
    for(i=0;i<fs2.options.length;i++)
        {
            if(fs2.options[i].selected)
                {    
                    fs2.remove(i);
                    d–;
                }
        }
}

function changelocation(locationid)                    // 根据选择下拉框动态改变下面的列表内容,可要可不要
    {
    form1.src1.length = 0;
    var locationid=locationid;
    var i;
    for (i=0;i < onecount; i++)
        {
            if (subcat[i][1] == locationid)
            {
                form1.src1.options[form1.src1.length] = new option(subcat[i][0], subcat[i][0]);
            }        
        }
        
    }
</script>
<form method="post" name=form1>
  <div align="center">
    <center>
    <table border="1" cellspacing="0" width="80%" bordercolorlight="#808080" bordercolordark="#ffffff" bgcolor="#f7f7f7">
      <tr>
        <td width="100" align="right" valign="middle">接收人:</td>
        <td width="195">
<select  size="1" name="ms" onchange="changelocation(this.value)">
<option value="1">石油总公司物资</option>
<option value="2">市石油公司物业公司</option>
</select>
    <select size="8" name="src1" multiple>
        <option value="1">tindy省石油物资设备公司</option>
          </select></td>
        <td width="61" valign="middle">
           
          <input type="button" value=" > " name="b3" onclick="move1to2(form1,src1,src2)" style="background-color: #fffff4; border: 1 ridge #c0c0c0"><br>
          <br>
           
          <input type="button" value=" < " name="b4" onclick="move2to1(form1,src1,src2)" style="background-color: #fffff4; border: 1 ridge #c0c0c0"><br>
          <br>
           
          <input type="button" value=" >> " name="b5" onclick="moveto2(form1,src1,src2)" style="background-color: #fffff4; border: 1 ridge #c0c0c0"><br>
          <br>
           
          <input type="button" value=" << " name="b6" onclick="moveto1(form1,src1,src2)" style="background-color: #fffff4; border: 1 ridge #c0c0c0"></td>
        <td width="241">    <select size="8" name="src2" multiple>
          </select></td>
      </tr>
    </table>
    </center>
  </div>
</form>
<script>
form1.src2.style.pixelwidth=form1.src1.scrollwidth;                //  让2个select一样的宽,是个好东东
</script>

赞(0)
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » 俺的小作品:根据下拉列表动态在列表框中显示,并实现2个列表框互斥选择
分享到: 更多 (0)

相关推荐

  • 暂无文章