平常我们用的原生select下拉框，大部分样式没办法修改，导致在不同的浏览器里面会跟设计图的风格大相径庭。所以为了能让它美化起来，就用JQ模拟了一个下拉框，可以随意定义样式。原生的下拉框也保留在div里面隐藏着，方便后台开发人员对其进行操作。
效果图如下：
HTML代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>下拉框美化</title>
<link href="css/style.css" rel="stylesheet"/>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/simSelect.js"></script>
<script>
$(function(){
//下面是调用初始化语句，class名可通用，也可以ID单独定义
$(".select-box").simSelect(); //什么参数都不带，默认样式。建议用这个，参数都写在div上面好了，比较直观。 $(".slt-box01").simSelect({ //所有参数如下：
maxNum: 4, //最大下拉个数(超过则显示滚动条)，默认为5
width: 250, //下拉框盒子宽度，默认为200px。为避免过多的设置宽度，尽量依照项目中最常见的宽度设定css样式。
direction: "down", //下拉方向，默认down，另一个是up
disabled: false //是否禁用，默认不禁，禁的话是true
});
$(".slt-box02").simSelect({ //举例：这里写参数，div上面也写参数的情况。结果是：会以div上面的为准
maxNum: 4,
width: 250,
direction: "down"
});
$(".slt-box03").simSelect({ //禁用下拉框的话，有三种写法，任选。建议第二种：
disabled: true, //一：这里的参数写disabled:true 二：给div加class="disabled" 三：给原生select加disabled="true"
width: 250
});
$("#slt-box04").simSelect(); //ID单独定义。单个option可以禁用
});
</script>
</head>
<body>
<!-- wrap和table非必需,用于布局而已 -->
<div class="wrap">
<table width="600">
<tbody>
<tr>
<th>不带参数：</th>
<td><div class="select-box">
<select>
<option>第一个选项</option>
<option>第二个选项</option>
<option>第三个选项</option>
<option>第四个选项</option>
<option>第五个选项</option>
<option>第六个选项</option>
</select>
</div></td>
</tr>
<tr>
<th>初始化语句写了参数：</th>
<td><div class="slt-box01">
<select>
<option>第一个选项</option>
