div写的select下拉框的特效

div写的select下拉框的特效可以显示点击的的选项可以选中的... div写的select下拉框的特效 可以显示点击的的选项 可以选中的 展开
 我来答
爱上BLACKSTONE
2014-07-11 · TA获得超过401个赞
知道小有建树答主
回答量:225
采纳率:0%
帮助的人:225万
展开全部

jqueryui插件里有现成的效果,叫selectmenu,代码如下(示例代码里有三种不同的方式供选择):

<!DOCTYPE html>

<html>
    
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="lib/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="lib/jquery-migrate-1.2.1.min.js"></script>

<link rel="stylesheet" href="lib/jquery-ui.min.css?v1.11.0-beta.2" />
<script src="lib/jquery-ui.min.js?v1.11.0-beta.2" type="text/javascript"></script>

<title>自定义下拉表单</title>

<style type="text/css">
fieldset {
    border: 0;
}
label {
    display: block;
    margin: 30px 0 0 0;
}
select {
    width: 200px;
}
.overflow {
    height: 200px;
}

</style>

 <script>
$(function() {
$( "#speed" ).selectmenu();
$( "#files" ).selectmenu();
$( "#number" )
    .selectmenu()
    .selectmenu( "menuWidget" )
    .addClass( "overflow" );
});
</script>

</head>
    
<body>
    <form action="#">
        <fieldset>
        
            <label for="speed">Select a speed</label>
            <select name="speed" id="speed">
                <option>Slower</option>
                <option>Slow</option>
                <option selected="selected">Medium</option>
                <option>Fast</option>
                <option>Faster</option>
            </select>
            
            <label for="files">Select a file</label>
            <select name="files" id="files">
                <optgroup label="Scripts">
                    <option value="jquery">jQuery.js</option>
                    <option value="jqueryui">ui.jQuery.js</option>
                </optgroup>
                <optgroup label="Other files">
                    <option value="somefile">Some unknown file</option>
                    <option value="someotherfile">Some other file with a very long option text</option>
                </optgroup>
            </select>
            
            <label for="number">Select a number</label>
            <select name="number" id="number">
                <option>1</option>
                <option selected="selected">2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
                <option>11</option>
                <option>12</option>
                <option>13</option>
                <option>14</option>
                <option>15</option>
                <option>16</option>
                <option>17</option>
                <option>18</option>
                <option>19</option>
            </select>
        </fieldset>
    </form>
</body>

</html>

对应的插件lib包在附件里

追问
不用下拉列表,用div
追答
用div的目的不也就是要改变样式吗?这个插件就是根据select然后自动添加div代码,可以修改css样式的,你用firebug看一下就知道了,这么写后台也好获取数据,单纯用div,还要写js代码,把数据单独提取出来,不麻烦吗?
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式