先来解释解释我标题所形容的问题。我相信大家在实际项目中肯定遇到过。
先来看看以下代码片:
<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改掉就是了。
这次的分享到此结束。
如果有大牛有更好的方法务必分享。