jquery模拟挑选下拉框取值效果

jquery模拟挑选框，效果图如下

复制代码代码如下：DOCTYPE html html lang=' en ' head title jquery模拟挑选框/title meta charset='utf-8 '样式的正文{ padd :0 margin :0 font-size :12 px；} ul、李{列表式：无；划水：0;margin :0 } # drop down { width :186 pxmargin 3360100 px auto位置：relative} .input _ select { width :150 pxh three :24 px线高：24 px填充-左侧：4 px填充-右侧：30 pxborder:1px固体# a9c 9 e2background : # e8f 5fe URL(箭头。gif)不重复右4px颜色： # 807 a 62} #下拉列表ul { width:184px背景# e8f 5 femargin-top :2 px；border:1px固体# a9c9e2位置：绝对；display:none } #下拉列表ul li { height:24px线高：24 px文本-缩进：10 px } #下载ul阿利{ display : block height :24 pxcolor : # 807 a 62；text-decoration : none } #下载ul阿利：悬停{背景： # c6dbfccolor : # 369 } # result { margin-top :10 px；text-align : center }/style脚本类型=' text/JavaScript ' src=' http :3358 JT。875 .cn/js/jquery。js '/script脚本类型=' text/JavaScript ' $(function(){ $(')' .输入选择').单击(function(){ var ul=$(' #下拉ul ')；if(ul。CSS(' display ')==' none '){ ul。向下滑动(“快速”)；} else { ul。向上滑动('快速')；} });$(' #下拉保险商实验所阿利')。单击(function(){ var txt=$(this)).text()；$('.输入选择').val(txt)；定义变量值=$(这个).attr(' rel ')；$(' #下拉列表').hide()；$(“# result”).html(")您选择了' txt '，值为：' '值);});});/script/head body div id='下拉' input class=' input _ select ' type=' text ' value='请选择城市/ul lia href='#' rel='2 '北京/a/li lia href='#' rel='3 '上海/a/li lia href='#' rel='4 '武汉/a/li lia href='#' rel='5 '广州/a/Li/ul/div div id=' result '/div/body/html