Select下拉选择框
下拉选择框是表单中必不可缺少的组件,在iceui中,下拉选择框使用html原生的select标签,而option 标签用于定义列表中的可选项,这一切对于前端开发者来说是很亲切的,因为你不需要再花时间来学习,本select下拉选择框完全惯用原生的写法,什么都不变,只需要给select标签添加一条class:select即可。
本下拉选择框的美化是直接操作原生的select,也就是说就算你不会写任何js脚本,也能通过最基本的form提交使用,这是其它框架中select所不具备的,iceui的所有表单组件都支持通过form标签同步提交。
最新更新:已经支持搜索功能
原生的select标签,无任何美化,我都不好意思在这里展示了(为什么设计的这么丑?这特么是人干的?……省略五千字的吐槽)
添加classselect后,自动格式化
默认选择某项,需要给option添加selected,这与原生select使用是完全一致的
修改选框中的默认提示,通过data-title修改默认提示
禁用清空选择项,通过设置data-clearfalse
新增开启搜索功能,通过设置data-searchtrue
新增通过url动态获取下拉菜单的数据,设置data-url为你的接口地址

该功能支持搜索

注意:如果你需要通过js添加监听事件,你应该写onchange

该data-url附带5个配置项用于设置ajax接口调用和数据格式,如下:

分组optgroup示例
多选multiple,依然使用原生的select标签,只需要按照原生的写法加上multiple属性即可
多级联动,通过data-connect设置相同的属性值来关联
如果需要100%宽,需要添加classselect-block
下拉选择框支持主题颜色bg-colorborder-color
取值和赋值

下拉选择框的取值和赋值方式与操作原生的select一致,在这里你可以使用ice(select).val()。

动态创建option选择项

如果select的选择项需要通过js动态创建,下面提供三种方式,推荐使用第三种方式哦!

第一种方式创建:通过html

第二种方式创建:通过ui.setSelect

第三种方式创建:ice选择器的select,等同于ui.setSelect,这种写法更加一目了然

通过data-url动态创建option选择项,设置data-url为你的接口地址

该data-url附带5个配置项用于设置ajax接口调用和数据格式,如下:

data-list具体说明:

一定注意,该参数不是必传的,接口的返回数据应该是一个集合,数据格式如下:

但你非要搞些反人类的操作,你的接口返回值可能是二维数组,甚至是三维数组,如下:

这时,你应该设置data-list参数,应该为:data-list="data.list"
代码示例