select
即可。select
后,自动格式化,禁用选择框与原生一致,添加disabled
selected
,这与原生select使用是完全一致的value
属性来设置默认选择某项,有助于回显data-title
修改默认提示data-clear
为false
data-search
为true
data-url
为你的接口地址该功能支持搜索
注意:如果你需要通过js添加监听事件,你应该写onchange
该data-url附带5个配置项用于设置ajax接口调用和数据格式,如下:
optgroup
示例multiple
,依然使用原生的select标签,只需要按照原生的写法加上multiple属性即可data-connect
设置相同的属性值来关联select-block
bg-color
、border-color
下拉选择框的取值和赋值方式与操作原生的select一致,在这里你可以使用ice(select).val()。
//假设html为: //取值 ice('#demo1').val(); //赋值 ice('#demo1').val(2);如果select的选择项需要通过js动态创建,下面提供三种方式,推荐使用第三种方式哦!
第一种方式创建:通过html
//假设html为: //动态创建option选择项 ice('#demo2').html(''); //重新渲染 ui.select();第二种方式创建:通过ui.setSelect
//假设html为: //动态创建option选择项,这种方式不需要再调用ui.select(); //第一个参数为选择器值,第二个为数组,字段最少包含value和name,selected用于默认选中 ui.setSelect('#demo3',[{value:1,name:'男',selected:true},{value:2,name:'女'}]); //如果数组的格式并没有value和name,那么可以传一个对象,具体操作: ui.setSelect('#demo3',{ list:[{id:1,title:'男',active:true},{id:2,title:'女'}], //必传 value:'id', //必传 name:'title', //必传 selected:'active', //可传可不传 group: false, //可传可不传,是否为optgroup,是的话,需为二维数组,list中的子项列表也需要有list });第三种方式创建:ice选择器的select,等同于ui.setSelect,这种写法更加一目了然
//假设html为: //动态创建option选择项,这种方式不需要再调用ui.select(); ice('#demo4').select([{value:1,name:'男'},{value:2,name:'女'}]);data-url
为你的接口地址该data-url附带5个配置项用于设置ajax接口调用和数据格式,如下:
data-ajax="post" data-param="{user:1, type:2}" data-list="data" data-value="brandId" data-name="brandName"一定注意,该参数不是必传的,接口的返回数据应该是一个集合,数据格式如下:
[ {value:1, name:"沧桑年倦"}, {value:2, name:"千秋几世"}, {value:3, name:"如烟若梦"} ]但你非要搞些反人类的操作,你的接口返回值可能是二维数组,甚至是三维数组,如下:
{ code:200, message:"请求成功", data:{ title:"下拉菜单", content:"一世情缘", list:[ {value:1, name:"沧桑年倦"}, {value:2, name:"千秋几世"}, {value:3, name:"如烟若梦"} ] } } 这时,你应该设置data-list参数,应该为:data-list="data.list"