解决<select>的option过多而造成的下拉过长的方法

先来解释解释我标题所形容的问题。我相信大家在实际项目中肯定遇到过。

先来看看以下代码片：

<div style="background: cornsilk; width: 240px;height: 100px;">
	<select id="mySelect">
		<option>1</option>
		<option>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>
	</select>
</div>

在google浏览器效果如下：

ie8效果如下：

点击的按钮样式会表现不一：

当我们点击的时候：

google浏览器效果：

ie浏览器下拉效果：

可以看出来：当option过多时，下拉菜单非常冗长，当他的父元素高度固定时，下拉会溢出父元素，非常不美观。

网上的解决方案大多是：给select添加size属性，或者固定select高度 和font-size大小。

但是依然不满足我们的设计需求。

<div style="background: cornsilk; width: 240px;height: 100px;">
	<select id="mySelect" size="4">
		<option>1</option>
		<option>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>
	</select>
</div>

效果：

这样的效果只能通过拖动滑块才能浏览option 当你需要点击才能再现option时不符合。我们再来优化：

<div style="background: cornsilk; width: 240px;height: 100px;">
	<select id="mySelect" size="4" style="height: 20px;">
		<option>1</option>
		<option>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>
	</select>
</div>

google效果：

点击效果：

这样虽然可以点击但是每次只能看到一条option 也不符合要求。

虽然通过这样那样的努力渐渐的接近了需求的效果。但是select元素非常顽固。而且不同浏览器下表现差异太大。

始终不能得出很好的需求效果.

我们的需求是：

虽然这个select具有20个option 但是表现的非常和谐。也很美观。

这个实现方法依赖于一个Jquery插件：chosen.大家可以百度这插件进行下载。

导入：jqeury.js    chosen.css  chosen.jquery.js。

使用方法：

$("#mySelect").chosen({
	disable_search_threshold: 50,
});

效果：

下拉：

很明显短了很多也好看了很多，我们还可以更短，插入以下css代码

<style>
	.chosen-results{
		height: 70px;
	}
</style>

效果：

这样就非常迎合我们的需求。如果要改掉默认的“select a ..."文本也可以通过js改掉就是了。

这次的分享到此结束。

如果有大牛有更好的方法务必分享。