LuLu UI中文文档和演示 » select下拉框

一、基于<select>的模拟下拉框

效果演示-单选

<select>
    <option disabled>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    <option selected>选项4</option>
    <option>选项5</option>
    <option>选项6</option>
</select>

$('#selMatch').click(function () {
    var sel = $(this).prevAll('select');
    sel.find('option').eq(1).prop('selected', true);
    // peak主题下，亦可以使用sel.refresh()
    sel.selectMatch();
});

hidden属性隐藏

$('#selHidden').click(function () {
    var sel = $(this).prevAll('select').eq(0);
    sel.attr('hidden', '');
});

滚动条：

效果演示-复选 ^NEW

请选择：

选中的结果是：选项2, 选项3

<select multiple>
    <option>选项1</option>
    <option selected>选项2</option>
    <option selected>选项3</option>
    <option>选项4</option>
    <option disabled>选项5</option>
    <option>选项6</option>
</select>

$('select').selectMatch();

语法和参数

支持模块化调用，使用示意如下：
```
var Select = require('common/ui/Select');
new Select(el);
```
el参数为jQuery包装器对象或者DOM对象，表示对应的<select>元素。

也支持传统jQuery链式调用（推荐），示意如下：
```
require('common/ui/Select');
$().selectMatch();
```
Select.js下拉方法只能基于原生的<select>元素生成，不支持数据。如果希望基于数据结构创建下拉列表，可以参考使用DropList.js。

Select.js下拉方法没有任何可选参数，想要处理事件，你就处理<select>这个原生下拉框就好了，其它什么也不用关心。例如：
```
$('select').change(function() {
    console.log('来自下拉框：我变化了');
});
```
同步与刷新

我们有时候，会手动修改<select>元素的选中项，或者动态添加内容。此时，在修改了<select>元素后，调用下$(select).selectMatch()方法，模拟下拉框就会自动刷新匹配，很简单吧。

如果引入了Enhance.js，亦可以使用$().refresh()进行UI更新。

非常不建议对模拟生成的下拉框元素进行操作。
下拉定位

本组件自带下拉列表位置判断，也就是超出窗体，会自动朝上显示，例如：
元素禁用

想要实现自定义下拉控件的的禁用效果，直接<select>元素添加disabled属性就可以了。例如：
```
<select style="width:100px;" disabled>
<option>请选择</option>
</select>
```
复选也是这样。例如：
```
<select multiple disabled>
    <option>选项1</option>
    <option>选项2</option>
</select>
```
元素隐藏

如果想要隐藏(不占据空间的隐藏)，可以给原生的<select>元素增加HTML5原生隐藏属性hidden，下拉框和后面的自定义下拉框会一并隐藏。
一些限制

下拉采用的相对元素的绝对定位，列表元素在DOM内部，因此，如果父级存在overflow:hidden，可能会让下拉部分列表无法显示，这个需要注意下。

二、下拉框作为插件独立使用

引入CSS：

<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Select.css">

引入JS：

<script src="//qidian.gtimg.com/lulu/theme/peak/js/common/ui/Select.js"></script>

单独使用Demo演示

LuLu UI组件中文文档 » select下拉框

select下拉框

一、基于<select>的模拟下拉框

效果演示-单选

效果演示-复选 NEW

语法和参数

同步与刷新

下拉定位

元素禁用

元素隐藏

一些限制

二、下拉框作为插件独立使用

效果演示-复选 ^NEW