如何把DIV模拟的Select的值传递出去了~~

因为嫌弃form的SELECT太难看，想通过JS+DIV模拟SELSEC来美化SELECT，目前已经知道如何来模拟了，但是这个模拟的SELECT的数值，我该如何传递到下一个页面了！~
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>JS+DIV模拟SELECT并且把无效选项设置为灰色</title> 
<script type="text/javascript"> 
$=function(id){ 
return document.getElementById(id); 
} 
var flag=false; 
function shlist(){ 
$("selectList").style.display=$("selectList").style.display=="block"?"none":"block"; 
} 
function changesever(ts){ 
document.getElementById("t_selected").innerHTML="---"+ts.innerHTML+"---"; 
shlist(); 
} 
function setFlag(val){ 
flag=val; 
} 
function hideList(){ 
if(!flag)document.getElementById("selectList").style.display="none"; 
} 
setCss=function(p){ 
p.style.cursor='hand'; 
p.style.backgroundColor='#BABABA'; 
} 
removeCss=function(p){ 
p.style.backgroundColor='white'; 
} 
</script> <style type="text/css"> 
#contain{ width:200px; height:18px; } 
#t_selected{ 
background-image:url(http://bbs.17gb.com/images/default/arrow_down.gif) !important; 
background-position:100% 50% !important; 
background-repeat:no-repeat !important; 
font-size:12px; 
border:#DFDFDF 1px solid; 
} 
#selectList{border:#DFDFDF 1px solid; font-size:12px; width:200px;text-align:left; display:none;} 
#selectList span{width:200px} 
</style> 
</head> 
<body> 
<div id="contain"> 
<div id="t_selected" onclick="shlist();" onmouseover="setFlag(true);" onmouseout="setFlag(false);" onblur="hideList()">---请选---</div> 
<div id="selectList" onmouseover="setFlag(true);" onmouseout="setFlag(false);"> 
<span onclick="changesever(this);" onmouseover="setCss(this)" onmouseout="removeCss(this);">餐饮美食</span><br/> 
<span onclick="changesever(this);" onmouseover="setCss(this)" onmouseout="removeCss(this);">休闲娱乐</span><br/> 
<span style='color:rgb(136, 136, 136)'>宾馆酒店</span><br/> 
<span onclick="changesever(this);" onmouseover="setCss(this)" onmouseout="removeCss(this);">购物指南</span><br/> 
<span onclick="changesever(this);" onmouseover="setCss(this)" onmouseout="removeCss(this);">运动场馆</span><br/> 
<span onclick="changesever(this);" onmouseover="setCss(this)" onmouseout="removeCss(this);">生活便利</span><br/> 
<span onclick="changesever(this);" onmouseover="setCss(this)" onmouseout="removeCss(this);">出行旅游</span><br/> 
</div> 
</div> 
</body>
</html>上面是模拟的代码

解决方案 »

  1.   

    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>JS+DIV模拟SELECT并且把无效选项设置为灰色</title> 
    <script type="text/javascript"> 
    $=function(id){ 
    return document.getElementById(id); 
    } 
    var flag=false; 
    function shlist(){ 
    $("selectList").style.display=$("selectList").style.display=="block"?"none":"block"; 
    } 
    function changesever(ts){ 
    document.getElementById("t_selected").innerHTML="---"+ts.innerHTML+"---";
    var p = document.createElement("input");
    p.type="hidden";
    p.value=ts.innerHTML;
    document.getElementById("t_selected").appendChild(p); 
    shlist(); 
    } 
    function setFlag(val){ 
    flag=val; 
    } 
    function hideList(){ 
    if(!flag)document.getElementById("selectList").style.display="none"; 
    } 
    setCss=function(p){ 
    p.style.cursor='hand'; 
    p.style.backgroundColor='#BABABA'; 
    } 
    removeCss=function(p){ 
    p.style.backgroundColor='white'; 
    } 
    </script> <style type="text/css"> 
    #contain{ width:200px; height:18px; } 
    #t_selected{ 
    background-image:url(http://bbs.17gb.com/images/default/arrow_down.gif) !important; 
    background-position:100% 50% !important; 
    background-repeat:no-repeat !important; 
    font-size:12px; 
    border:#DFDFDF 1px solid; 
    } 
    #selectList{border:#DFDFDF 1px solid; font-size:12px; width:200px;text-align:left; display:none;} 
    #selectList span{width:200px} 
    </style> 
    </head> 
    <body>
    <form action="test.html" onsubmit="alert('there is a hidden input text value '+this.getElementsByTagName('input')[0].value);return false;"> 
    <div id="contain"> 
    <div id="t_selected" onclick="shlist();" onmouseover="setFlag(true);" onmouseout="setFlag(false);" onblur="hideList()">---请选---</div> 
    <div id="selectList" onmouseover="setFlag(true);" onmouseout="setFlag(false);"> 
    <span onclick="changesever(this);" onmouseover="setCss(this)" onmouseout="removeCss(this);">餐饮美食</span><br/> 
    <span onclick="changesever(this);" onmouseover="setCss(this)" onmouseout="removeCss(this);">休闲娱乐</span><br/> 
    <span style='color:rgb(136, 136, 136)'>宾馆酒店</span><br/> 
    <span onclick="changesever(this);" onmouseover="setCss(this)" onmouseout="removeCss(this);">购物指南</span><br/> 
    <span onclick="changesever(this);" onmouseover="setCss(this)" onmouseout="removeCss(this);">运动场馆</span><br/> 
    <span onclick="changesever(this);" onmouseover="setCss(this)" onmouseout="removeCss(this);">生活便利</span><br/> 
    <span onclick="changesever(this);" onmouseover="setCss(this)" onmouseout="removeCss(this);">出行旅游</span><br/> 
    </div> 
    </div> 
    <input type="submit"/>
    </form>
    </body>
    </html>use hidde input post the value in the form
      

  2.   

    就是搞个<input id="id" type="hidden"/>
    选中的同时把值赋进去.提交的时候就可以用这个id去request拿
      

  3.   

    如何实现选中的时候把值赋给 hidden这个 input了？？？