bootstrap-lyear-select下拉 该插件是我自己做的一个基于bootstrap的简单select下拉框插件,只支持单个选项(不支持多选项和分组)、搜索。使用时,记得引入页面style内的样式。 之所以做这个插件,只是为了配合后面的联动插件一起使用,如果你需要更多的其他功能,请使用另外的两个select插件。  如果你使用该插件,那么需要新增以下的样式。 ```css .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; } ``` ```html <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="请选择"`(设置空项的文字)。 ```javascript $('.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原生一样没有区别。 ```javascript $('.exampleSelect').val(); ``` 插件项目中页面名字:`test_bootstrap_lyear_select.html` `test_bootstrap_lyear_select_v4.html` [点击查看 简单select插件 在线演示](http://example.itshubao.com/example/137.html "点击查看 简单select插件 在线演示") 涉及的文件: - `js/bootstrap-lyear-select.min.js`