DL、DT、DD、CSS+JS实例

 

<style>
*{ margin:0; padding:0}
body{ font-family:Verdana; font-size:12px; line-height:1.8; padding:50px;}

form dt{ background:url(/article/UploadPic/20087/28/2008728133512977.gif) no-repeat left center;
width:193px;cursor:default; padding-left:5px;}
form .out{ background:#FFFFFF; color:#000000;}
form .move{ background:#000066; color:#FFFFFF}
form dl{text-align:left;}
form dd{ border:1px solid #000;position:absolute; width:195px; overflow:hidden;background:#fff; margin-top:-3px;}
form dd li{cursor:default; width:100%; padding-left:5px;}
</style>

<script language="javascript">
function AjaxSelectBox(v){
 var dl = v.parentNode;
 var dd = dl.getElementsByTagName("dd")[0];
 var dt = dl.getElementsByTagName("dt")[0];
 var lis = dl.getElementsByTagName("li");
 var html = '';
 for(var y=0; y<lis.length; y++){  
  html += '<li onclick="SetSelectInput(this,1);" onmouseout="SetSelectInput(this,2);" onmousemove="SetSelectInput(this,3);" value="'+lis[y].value+'">' + lis[y].innerHTML + '</li>';
 }
 dl.getElementsByTagName("ul")[0].innerHTML = html;
 dd.style.display = "block";
 dl.onmouseout = function() {dd.style.display = "none";}
 dd.onmouseover = function() {dd.style.display = "block";}
}

function SetSelectInput(v,flag){
 var dl = v.parentNode;
 while(dl.nodeName != 'DL'){
  dl = dl.parentNode;
 }
 var input = dl.getElementsByTagName("input")[0];
 var dd = dl.getElementsByTagName("dd")[0];
 var dt = dl.getElementsByTagName("dt")[0];
 dd.onmouseover = function() {dd.style.display = "block";}
 v.onmouseover = function() {dd.style.display = "block";}
 dd.onmouseout = function() {dd.style.display = "none"}
 if(flag == 1){
  input.value = v.attributes.getNamedItem("value").value;
  dt.innerHTML = v.innerHTML;
  dd.style.display = "none";
 } else if(flag == 2){
  v.className = 'out'; return;
 } else{
  v.className = 'move'; return;
 } 
}
</script>

 <dl>
    <dt onclick="AjaxSelectBox(this)">------------请选择------------
         </dt>
    <dd style="display:none">
      <ul>
        <li value="1">this is 001.</li>
        <li value="2">this is 002.</li>
        <li value="3">this is 003.</li>
        <li value="4">this is 004.</li>
        <li value="5">this is 005.</li>
        <li value="6">this is 006.</li>
        <li value="7">this is 007.</li>
        <li value="8">this is 008.</li>
        <li value="9">this is 009.</li>
        <li value="10">this is 010.</li>
      </ul><input type="hidden" value="" />

    </dd>
  </dl>