select 美化，并且能把先定的值通过FORM传到变量里

select 美化，并且能把先定的值通过FORM传到下一个页，网上要不就是单纯的美代，但是都是JS的不知道怎么通过FORM传到变量里，请大家帮帮忙。
我手上有一个代码，是美化的SELECT，但是我不想要后面的输入，下拉里的内容固定就可以。
有高手帮改一改呗。<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<style type="text/css">
.divMain
{
 border-style:solid;
 border-width:1px;
 border-color:#0099ff;
 position:absolute; 
 left:72px; 
 top:36px; 
 width:157px; 
 height:25px; 
 z-index:1; 
 overflow: visible;
}.divText
{
 border-style:none;
 border-width:1px;
 border-color:#0099ff;
 position:absolute; 
 left:76px; 
 top:39px; 
 width:125px; 
 height:15px; 
 z-index:2;
 font-size:x-small;
 font-family:Tahoma;
 color:#0099FF;
}.content
{
 border-style:solid;
 border-width:1px;
 border-color:#0099ff;
 position:absolute; 
 left:72px; 
 top:60px; 
 width:136px;
 height:25px; 
 z-index:3; 
 visibility: hidden;
}.spanCss
{
 width:100%;
 color:#666666;
 font-family:Tahoma;
 font-size:x-small;
 cursor:hand;
}.button
{
 BORDER-RIGHT: #7b9ebd 1px solid; 
 PADDING-RIGHT: 5px; 
 padding-top:2px;
 BORDER-TOP: #7b9ebd 1px solid; 
 PADDING-LEFT: 5px; 
 FONT-SIZE: 10pt; 
 FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cccccc); 
 BORDER-LEFT: #7b9ebd 1px solid; 
 CURSOR: hand; 
 BORDER-BOTTOM: #7b9ebd 1px solid
}
</style>
<body>
<div id="divMain" class="divMain"></div>
<div id="divText" class="divText"></div>
 <div id="content" class="content" onClick="onClickContent('content')" >
 </div>
<div id="button" onClick="onClickBtn('content')" style="border-left-style:solid;border-left-width:1px;border-left-color:#CCCCCC;cursor:hand;position:absolute; left:207px; top:36px; width:15; height:25px; z-index:4;"><img src="1.jpg" width="15" height="15" hspace="3" vspace="5"></div>
<div id="Layer1" style="position:absolute; left:285px; top:37px; width:292px; height:103px; z-index:5">
  <form name="form1" method="post" action="">
    <input class="button" name="button" type="button" id="button" value="添加项" onClick="addItem()">
    <input type="text" id="textfield" name="textfield" value="">
  </form>
</div>
<script language="javascript">
var flag;
flag=false;
function onSelected(obj)
{
 document.getElementById('divText').innerText=obj.innerText;
}function onClickBtn(obj)
{
 if (flag==false)
 {
  document.getElementById(obj).style.visibility="visible";
  flag=true;
 }
 else
 {
  document.getElementById(obj).style.visibility="hidden";
  flag=false;
 }
}function onClickContent(obj)
{
 document.getElementById(obj).style.visibility="hidden";
 flag=false;
}function hiddenDiv()
{
 if (flag==true)
  document.getElementById('content').style.visibility="hidden";
}function changeColor(obj)
{obj.style.backgroundColor="#ccc";}function changeColorBack(obj)
{obj.style.backgroundColor="";}function addItem()
{
 if (document.getElementById('textfield').value=="")
 {
  alert("input data first!");
  return ;
 }
 var str;
 var value;
 value=document.getElementById('textfield').value;
 str="<span onClick='onSelected(this)' ";
 str+="class='spanCss'";
 str+="onMouseMove='changeColor(this)' onMouseOut='changeColorBack(this)'>"+value+"</span>";
// alert(str);
 document.getElementById('content').innerHTML+=str;
}
//document.onclick=hiddenDiv;
</script>
</body>

解决方案 »

  1.   


    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_reloadPage(init) {  //reloads the window if Nav4 resized
      if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
        document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
      else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    //-->
    </script>
    <style type="text/css">
    .divMain
    {
    border-style:solid;
    border-width:1px;
    border-color:#0099ff;
    position:absolute;
    left:72px;
    top:36px;
    width:157px;
    height:25px;
    z-index:1;
    overflow: visible;
    }.divText
    {
    border-style:none;
    border-width:1px;
    border-color:#0099ff;
    position:absolute;
    left:76px;
    top:39px;
    width:125px;
    height:15px;
    z-index:2;
    font-size:x-small;
    font-family:Tahoma;
    color:#0099FF;
    }.content
    {
    border-style:solid;
    border-width:1px;
    border-color:#0099ff;
    position:absolute;
    left:72px;
    top:60px;
    width:136px;
    height:25px;
    z-index:3;
    visibility: hidden;
    }.spanCss
    {
    width:100%;
    color:#666666;
    font-family:Tahoma;
    font-size:x-small;
    cursor:hand;
    }.button
    {
    BORDER-RIGHT: #7b9ebd 1px solid;
    PADDING-RIGHT: 5px;
    padding-top:2px;
    BORDER-TOP: #7b9ebd 1px solid;
    PADDING-LEFT: 5px;
    FONT-SIZE: 10pt;
    FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cccccc);
    BORDER-LEFT: #7b9ebd 1px solid;
    CURSOR: hand;
    BORDER-BOTTOM: #7b9ebd 1px solid
    }
    </style>
    <body>
    <div id="divMain" class="divMain"> </div>
    <div id="divText" class="divText"> </div>
    <div id="content" class="content" onClick="onClickContent('content')" >
    <span class="spanCss" onmouseout="changeColorBack(this)" onmousemove="changeColor(this)" onclick="onSelected(this)" style="">dfsdfdf </span><br/>
    <span class="spanCss" onmouseout="changeColorBack(this)" onmousemove="changeColor(this)" onclick="onSelected(this)" style="">fffff </span><br/>
    <span class="spanCss" onmouseout="changeColorBack(this)" onmousemove="changeColor(this)" onclick="onSelected(this)" style="">sssss </span>
    </div>
    <div id="button" onClick="onClickBtn('content')" style="border-left-style:solid;border-left-width:1px;border-left-color:#CCCCCC;cursor:hand;position:absolute; left:207px; top:36px; width:15; height:25px; z-index:4;"> <img src="1.jpg" width="15" height="15" hspace="3" vspace="5"> </div><script language="javascript">
    var flag;
    flag=false;
    function onSelected(obj)
    {
    document.getElementById('divText').innerText=obj.innerText;
    }function onClickBtn(obj)
    {
    if (flag==false)
    {
      document.getElementById(obj).style.visibility="visible";
      flag=true;
    }
    else
    {
      document.getElementById(obj).style.visibility="hidden";
      flag=false;
    }
    }function onClickContent(obj)
    {
    document.getElementById(obj).style.visibility="hidden";
    flag=false;
    }function hiddenDiv()
    {
    if (flag==true)
      document.getElementById('content').style.visibility="hidden";
    }function changeColor(obj)
    {obj.style.backgroundColor="#ccc";}function changeColorBack(obj)
    {obj.style.backgroundColor="";}/*function addItem()
    {
    if (document.getElementById('textfield').value=="")
    {
      alert("input data first!");
      return ;
    }
    var str;
    var value;
    value=document.getElementById('textfield').value;
    str=" <span onClick='onSelected(this)' ";
    str+="class='spanCss'";
    str+="onMouseMove='changeColor(this)' onMouseOut='changeColorBack(this)'>"+value+" </span>";
    // alert(str);
    document.getElementById('content').innerHTML+=str;
    }*/
    //document.onclick=hiddenDiv;
    </script>
    </body> ok.
    貌似只能在Ie下用