bootstrap-lyear-select下拉

该插件是我自己做的一个基于bootstrap的简单select下拉框插件，只支持单个选项(不支持多选项和分组)、搜索。使用时，记得引入页面style内的样式。

之所以做这个插件，只是为了配合后面的联动插件一起使用，如果你需要更多的其他功能，请使用另外的两个select插件。

如果你使用该插件，那么需要新增以下的样式。

.lyear-select {
    position: relative;
}
.lyear-select .form-control {
    background-color: #fff!important;
    cursor: pointer;
}
.lyear-select .dropdown-menu {
    min-width: 100%;
    max-height: 300px;
    overflow-y: auto;
}
.lyear-select .dropdown-menu a {
    cursor: pointer;
}
.lyear-select .dropdown-menu li.selected a,
.lyear-select .dropdown-menu li.selected:hover a {
    background-color: #33cabb;
    color: #fff;
}
.lyear-select .form-control {
    padding-right: 30px;
}
.lyear-select i.mdi {
    font-size: 20px;
    position: absolute;
    top: 3px;
    right: 5px;
}

<div class="form-group">
  <select name="example-1" class="exampleSelect">
    <option value=""></option>
    <option value="1">最新的</option>
    <option value="2">未审核</option>
    <option value="3">未通过</option>
    <option value="4">正在审核</option>
    <option value="5">已审核</option>
    <option value="6">已通过</option>
  </select>
</div>

在select上可以设置 data-search="true"（是否开启搜索） data-width="200px"（设置长度，可以设置百分比） data-placeholder="请选择"（设置空项的文字）。

$('.simpleSelect').each(function() {
    var $this = $(this);
    $this.lyearSelect({
        width: $this.data('width') ? $this.data('width') : '',                          // 宽度width，示例：75px、50%
        placeholder: $this.data('placeholder') ? $this.data('placeholder') : '请选择',   // 空值项提示语，默认：请选择
        search: $this.data('search') ? $this.data('search') : false,                    // 是否允许搜索
    });
});

获取选中值跟select原生一样没有区别。

$('.exampleSelect').val();

插件项目中页面名字：test_bootstrap_lyear_select.html test_bootstrap_lyear_select_v4.html

点击查看 简单select插件 在线演示

涉及的文件：

• js/bootstrap-lyear-select.min.js