chosen组件实现下拉框

chosen组件用于增强原生的select控件，使之有更好的用户体验。官方demo https://harvesthq.github.io/chosen/

目前项目中碰到的使用，比如一个页面中有两个不同样式的下拉框：

1、首先在js文件夹中建一个名为chosen的文件夹，放入这样几个文件：

2、在html页面中引入chosen的css和js文件：

3、在html中写这两个下拉框：

<div class="myselect1 mt10 ml10">
    <select id="select1" class="myselect">
        <option value="1">中国</option>
        <option value="2">美国</option>
        <option value="3">韩国</option>
    </select>
    <span>下拉框1</span>
</div>
<div class="myselect2 mt10 ml10">
    <select id="select2" class="myselect">
        <option value="1">北京</option>
        <option value="2">华盛顿</option>
        <option value="3">首尔</option>
    </select>
    <span>下拉框2</span>
</div>

页面效果为普通的select样式：

4、在js中初始化这两个下拉框：

(function(win, $) {

     // 初始化下拉框
    $("select").chosen({
        disable_search: true
    }).change(function(event, opt) {
        // 获取选中的值
        var val = $(this).find("option:selected").html();
        console.log(val);
    });
}(this, jQuery));

效果就变成了官方预设的下拉效果（当文字过长时会自动显示部分省略号）：

5、给这两个下拉框写样式：

/*两个框的宽度是通过这样直接指定的方式设定的*/
.myselect1 select {
    width: 100px;
}
.myselect2 select {
    width: 150px;
}

/*#region 重写下拉框 */
/*两个下拉框的相同样式直接重写*/

/*整个框外观上的样式*/
.chosen-container
{
    margin-right: 100px;
    float: left;
    text-align: center;
    *padding: 5px 0;
}

.chosen-container .chosen-results
{
    padding: 0;
    margin-right: 0;
}
/*下拉框的那个框的样式*/
.chosen-container-single .chosen-single
{
    background: #f9f9f9;
    border: 0;
    border-radius: 0;
    box-shadow: none;
　　/*后来的测试中发现，这个height是包括边框的高度*/
　  line-height: 36px;
    height: 36px;
}

.chosen-container-single .chosen-single span
{
    margin-right: 26px;
    letter-spacing: 2px;
    margin-left: 4px;
}
/*下拉项*/
.chosen-container .chosen-results li
{
    letter-spacing: 4px;
}

.chosen-container-single .chosen-single div
{
    padding: 0;
    width: 21px;
}
/*图标*/
.chosen-container-single .chosen-single div b
{
    background: url(../images/bg.png) no-repeat left 15px;
}

.chosen-container-active.chosen-with-drop .chosen-single div b
{
    background: url(../images/bg.png) no-repeat left 15px;
}
/*当下拉项显示出来时下拉框的那个框的样式*/
.chosen-container-active.chosen-with-drop .chosen-single
{
    background: #f9f9f9;
    box-shadow: none;
    border: 0;
    border-radius: 0;
}

.chosen-container-single .chosen-drop
{
    border: 1px solid #f9f9f9;
    background-color: #f9f9f9;
    box-sizing: border-box;
}

.chosen-container .chosen-results li.highlighted
{
    background-color: #397ddb;
    background-image: none;
}
/*给其中一个框分别指定个性的样式，另一个框的样式设定方式同理，使用父选择器进行限制*/
.myselect1 .chosen-container
{
    text-align: left;
}
.myselect1 .chosen-container-single .chosen-single {
    background-color: #f00;
    color: #fff;
    font-size: 20px;
}
.myselect1 .chosen-container .chosen-results li
{
    letter-spacing: 0;
    padding-left: 12px;
}
.myselect1 .chosen-container-active.chosen-with-drop .chosen-single
{
    background: #0f0;
    border: 1px solid #f00;
}

（当下拉框需要浮动时，所在的div层不能写overflow:hidden；这样点击框后框会消失得几乎不见，所以要在所在的div清除浮动）：

效果图：

             

经测试，以上效果是在chrome，ff，IE8、9、10下的显示，在IE7中显示达不到效果：

至少整个外观样式不合格（下拉框和右边文字的距离没拉开），所以可以在css中直接针对IE7写hack样式：

 

 然后距离至少是拉开了的：

====================================分割线 2016.10.10=========================================