请看以下代码,如何实现按按钮后颜色不变

<style>
option{background-color:#bddbd5}
</style>

解决方案 »

  1.   

    原move(s1,s2,flag,rr)函数有些晦涩，改写按功能分化为多个函数。同时改写函数的调用参数，新增单击移动效果<html>
    <head>
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="Seagle.K">
    <meta http-equiv="Content-Type" content="text/html; charset=GBK">
    <title>
    </title>
    <SCRIPT language=JavaScript>
    <!--
    //** Power by Fason
    //** Email:[email protected]
    //history: seagle 忽略IP中的* 2003-04-25 
    function AddOption(AddField,OptionText,OptionVal)
    {//向指定select域AddField，插入Option对象
    if (OptionText === '')//若option的text属性为空,则不作添加
    return
    NewOption = new Option(OptionText, OptionVal);
    AddField.options[AddField.length]=NewOption;
    }function L2L_SpecOption(lFrom, lTo)
    {
    var i;
    for (i=0; i<lFrom.length; i++)
    {
    if (lFrom.options[i].selected)
    {
    AddOption(lTo, lFrom.options[i].text, lFrom.options[i].value);
    lTo[lTo.length-1].style.backgroundColor = lFrom.options[i].style.backgroundColor;
    }
    }
    for (i=lFrom.length-1; i>=0; i--)
    {
    if (lFrom.options[i].selected)
    lFrom.options[i]=null;
    }
    }function L2L_AllOption(lFrom, lTo)
    {
    var i;
    for (i=0; i<lFrom.length; i++)
    {
    AddOption(lTo, lFrom.options[i].text, lFrom.options[i].value);
    lTo[lTo.length-1].style.backgroundColor = lFrom.options[i].style.backgroundColor;
    }
    for (i=lFrom.length-1; i>=0; i--)
    {
    lFrom.options[i]=null;
    }
    }
    function move(s1,s2,flag){
    var oFrom = document.formName2.elements[s1];
    var oTo = document.formName2.elements[s2];
    switch (flag)
    {
    case '>':
    case '<':
    L2L_SpecOption(oFrom, oTo);
    break;
    case '>>':
    case '<<':
    L2L_AllOption(oFrom, oTo);
    break;
    default:
    }
    }/*move_self(s,flag):s是列表框name,flag(1,-1)，是上移或下移*/
    function move_self(s,flag)
    {
    var sa=document.frm.elements[s]
    var tem;
    with(sa)
    {
    if(flag==1)
    {
    if(selectedIndex>0)
    for(i=0;i<length;i++)
    if(options[i].selected)
    {
    tem_text=options[i].text;tem_value=options[i].value;
    options[i].text = options[i-1].text;
    options[i].value = options[i-1].value;
    options[i-1].text = tem_text;options[i-1].value = tem_value;
    options[i-1].selected = true;options[i].selected = false;
    }
    }
    else
    {
    for(i=length-1;i>=0;i--)
    if(options[i].selected)
    {
    if(i==length-1)break;
    tem_text=options[i].text;tem_value=options[i].value;
    options[i].text = options[i+1].text;
    options[i].value = options[i+1].value;
    options[i+1].text = tem_text;options[i+1].value = tem_value;
    options[i+1].selected=true;options[i].selected=false;
    }
    }
    }
    }/*显示列表框选中的值,s是列表框的name*/
    function show(s)
    {
    var str=""
    with(document.frm.elements[s])
    for(i=0;i<length;i++)
    if(options[i].selected)
    str+="\n第"+(i+1)+"个option:\ntext:"+options[i].text+" value:"+options[i].value;
    alert(str);
    }function sortArr(a,b)
    {
    if(a.text>b.text)return 1
    if(a.text<b.text)return -1
    return 0
    }
     
    function get_all(){  
     var temp=document.formName2.elements["BRANCH_LIST"];
      for (i=0;i<temp.options.length;i++){  
           temp.options[i].selected=true;
      }  
    }   
    //-->
    </SCRIPT>
    </head>
    <body>
    <div align=center>
    <form method="get" action="set_trans_role_c1_submit.jsp" name="formName2" target="iframe2" >
    <table>
    <tr>
    <td    valign="top"  >
    未被授权执行的交易如下<br>
    <select size="20" name="D2" multiple ondblclick="move('D2','BRANCH_LIST','>')">
        <option value="0001" style="background-color:#bddbd5">
        0001-计量单位定义  
        </option>1
      <option value="0002" style="background-color:#deffde">
         0002-货品分类码定义 
        </option>
      </select>
      <p>共38条</p>
    </td>  
    <td>
    <INPUT onclick="move('D2','BRANCH_LIST','>>')" type=button value=" >> "><BR>
    <INPUT onclick="move('D2','BRANCH_LIST','>')" type=button value=" > "><BR>
    <INPUT onclick="move('BRANCH_LIST','D2','<')" type=button value=" < "><BR>
    <INPUT onclick="move('BRANCH_LIST','D2','<<')" type=button value=" << ">
    </td>
    <td  valign="top"  >
    可执行的交易如下<br>
      <select size="20" name="BRANCH_LIST" multiple ondblclick="move('BRANCH_LIST','D2','<')">
        <option value="0006" style="background-color:#bddbd5">
        0006-<货品资料> 查询定义  
        </option>1
        <option value="0007" style="background-color:#deffde">
         0007-<物料资料> 查询定义 
        </option>
      </select>
       <p>共5条</p>
    </td>
    </tr>
    </TABLE>     
    <input type="hidden" name="role_no" value="1">
    <input type="submit" value="确认" name="B1" onclick="get_all();">
      </form>
    <iframe src="blank.html" name="iframe2" width="100%" height="150"  scrolling="auto" allowtransparency="true" frameborder=0 application="true"></iframe>  
    </div>  
    </body>
    </html>
      

  2.   

    seeu1688(kangel) 你好，原来的有排序功能，能否加入排序功能，谢谢！
      

  3.   

    我自己解决了，OK!
    <html><head>
    <LINK REL=STYLESHEET TYPE="text/css" HREF="bc4j.css">
    <meta http-equiv="Content-Type" content="text/html; charset=GBK">
    <title>
    </title>
    <SCRIPT language=JavaScript>
    <!--
    //** Power by Fason
    //** Email:[email protected] move(s1,s2,flag,rr){
    var tem=new Array();
      //alert(window.frames['iframe2'].document.formName.BRANCH_LIST.value);
    // var sa=document.frm.elements[s1];
    // var sb=document.frm.elements[s2];
    // var sa=document.iframe1.D2;
     //var sb=document.iframe2.formName2.BRANCH_LIST;//ok 的
    // var sa=document.iframe1[s1];
     var sa=document.formName2.elements[s1];
     var sb=document.formName2.elements[s2];
    // var sb=document.iframe2.formName2[s2];
     if (rr==1)
     { sa=document.formName2.elements[s2];
       sb=document.formName2.elements[s1];
       //sb=document.iframe1[s1];
     }  
    var s=sa.selectedIndex>-1?1:0
    with(sa)
    for(i=length-1;i>=0;i--)
    if(options[i].selected||flag){tem[tem.length]=options[i];options[i]=null}
      
    if(s||flag)
    {
    for(i=0;i<sb.length;i++) tem[tem.length]=sb.options[i]
    with(sb)
    {
    length=0;
    tem.sort(sortArr)
    for(i=0;i<tem.length;i++) options[length]=new Option(tem[i].text,tem[i].value)
    }
    }
    var i;
    for (i=0; i<sb.length; i++)
        {  if (i%2==0) sb.options[i].style.backgroundColor='#bddbd5';
           else  sb.options[i].style.backgroundColor='#deffde';
        }
    }/*move_self(s,flag):s是列表框name,flag(1,-1)，是上移或下移*/
    function move_self(s,flag)
    {
    var sa=document.frm.elements[s]
    var tem;
    with(sa)
    {
    if(flag==1)
    {
    if(selectedIndex>0)
    for(i=0;i<length;i++)
    if(options[i].selected)
    {
    tem_text=options[i].text;tem_value=options[i].value;
    options[i].text = options[i-1].text;
    options[i].value = options[i-1].value;
    options[i-1].text = tem_text;options[i-1].value = tem_value;
    options[i-1].selected = true;options[i].selected = false;
    }
    }
    else
    {
    for(i=length-1;i>=0;i--)
    if(options[i].selected)
    {
    if(i==length-1)break;
    tem_text=options[i].text;tem_value=options[i].value;
    options[i].text = options[i+1].text;
    options[i].value = options[i+1].value;
    options[i+1].text = tem_text;options[i+1].value = tem_value;
    options[i+1].selected=true;options[i].selected=false;
    }
    }
    }
    }/*显示列表框选中的值,s是列表框的name*/
    function show(s)
    {
    var str=""
    with(document.frm.elements[s])
    for(i=0;i<length;i++)
    if(options[i].selected)
    str+="\n第"+(i+1)+"个option:\ntext:"+options[i].text+" value:"+options[i].value;
    alert(str);
    }function sortArr(a,b)
    {
    if(a.text>b.text)return 1
    if(a.text<b.text)return -1
    return 0
    }
     
    function get_all(){  
     var temp=document.formName2.elements["BRANCH_LIST"];
      for (i=0;i<temp.options.length;i++){  
           temp.options[i].selected=true;
      }  
    }   
    //-->
    </SCRIPT>
    </head>
    <body>
    <div align=center><form method="get" action="set_trans_role_c1_submit.jsp" name="formName2" target="iframe2" >
    <table>
    <tr>
    <td    valign="top"  >
    未被授权执行的交易如下<br>
    <select size="20" name="D2" multiple  >
        <option value="0001" style="background-color:#bddbd5">
        0001-计量单位定义  
        </option>1
      <option value="0002" style="background-color:#deffde">
         0002-货品分类码定义 
        </option>
      </select>
      <p>共38条</p>
    </td>  
    <td><INPUT onclick="move('D2','BRANCH_LIST',1)" type=button value=" >> "><BR><INPUT onclick="move('D2','BRANCH_LIST',0)" type=button value=" > ">
        <BR><INPUT onclick="move('D2','BRANCH_LIST',0,1)" type=button value=" < ">
    <BR><INPUT onclick="move('D2','BRANCH_LIST',1,1)" type=button value=" << ">
    </td>
    <td  valign="top"  >
    可执行的交易如下<br>
      <select size="20" name="BRANCH_LIST" multiple >
        <option value="0006" style="background-color:#bddbd5">
        0006-&lt;货品资料&gt; 查询定义  
        </option>1
        <option value="0007" style="background-color:#deffde">
         0007-&lt;物料资料&gt; 查询定义 
        </option>
      </select>
       <p>共5条</p>
    </td>
    </tr>
    </TABLE>     
    <input type="hidden" name="role_no" value="1">
    <input type="submit" value="确认" name="B1" onclick="get_all();">
      </form>
    <iframe src="blank.html" name="iframe2" width="100%" height="150"  scrolling="auto" allowtransparency="true" frameborder=0 application="true"></iframe>  
    </div>  
    </body>
    </html>