用jQuery制作模拟下拉框

第一步：先搭建好结构

这是普通的下拉框代码：

XML/HTML代码

　　　1.　<select　name="abc"　id="abc">　　
　　　2.　　　　　<option　value="1">选项一</option>　　
　　　3.　　　　　<option　value="2">选项二</option>　　
　　　4.　　　　　<option　value="3">选项三</option>　　
　　　5.　　　　　<option　value="4">选项四</option>　　
　　　6.　　　　　<option　value="5">选项五</option>　　
　　　7.　　　　　<option　value="6">选项六</option>　　
　　　8.　</select>　

这个是模拟出来的：

XML/HTML代码

　　　1.　<div　class="CRselectBox">　　
　　　2.　　　　　<input　type="hidden"　value=""　　name="abc"　id="abc"/>　<!--　hidden　用来代替select的值　-->　　
　　　3.　　　　　<input　type="hidden"　value=""　　name="abc_CRtext"　id="abc_CRtext"/>　<!--　hidden　用来代替select的文本-->　　
　　　4.　　　　　<a　class="CRselectValue"　href="#">选项一</a>　　
　　　5.　　　　　<ul　class="CRselectBoxOptions">　　
　　　6.　　　　　　　　　<li　class="CRselectBoxItem"><a　href="#"　class="selected"　rel="1">选项一</a></li>　　
　　　7.　　　　　　　　　<li　class="CRselectBoxItem"><a　href="#"　rel="2">选项二</a></li>　　
　　　8.　　　　　　　　　<li　class="CRselectBoxItem"><a　href="#"　rel="3">选项三</a></li>　　
　　　9.　　　　　　　　　<li　class="CRselectBoxItem"><a　href="#"　rel="4">选项四</a></li>　　
　　10.　　　　　　　　　<li　class="CRselectBoxItem"><a　href="#"　rel="5">选项五</a></li>　　
　　11.　　　　　　　　　<li　class="CRselectBoxItem"><a　href="#"　rel="6">选项六</a></li>　　
　　12.　　　　　</ul>　　
　　13.　</div>