# hlsCombobox标签(下拉框)

ComboBox下拉列表组件,通常数据源以code - meaning形式出现,用户操作的是meaning,实际保存的是code。

```xml

    <h:hlsCombobox name="hlsCombobox" id="hlsCombobox"
                   bind="enabled: isEnabled,source: sdDataSource, value:data.code"
                   colspan="3"
                   dataTextField="meaning"
                   dataValueField="code"
                   placeholder="hlsCombobox"
                   prompt="hlsCombobox"
                   promptColspan="1"
                   valuePrimitive="true"
                   style="width:100%"
    />
    
```

### **主要属性**
属性名    | 类型  | 说明  |
--- | ---   | --- |
id | String | id  |
promptColspan | String | 提示语句需要占几列   |
promptClassName | String | 提示语句类名,默认不填 |
promptImage | String   |  提示前面的文字图形,默认不填 |
prompt | String   |  提示信息 |
colspan | String   |  所占列数 |
hlsClassName | String | 类名,默认不填 |
dataSource | DataSource | 数据源 |
dataTextField | String | 返回的显示描述字段 |
dataValueField| String | 绑定的英文字段 |
enable | Boolean | 是否可编辑,true为可编辑,false不可编辑  | 
placeholder | String |  占位符  |
template| Function|  渲染函数 |   
change| Function |   数据变化时触发的函数  |


> 属性用法请参考KendoUI文档 [http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox](http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox) 


### **用法示例*

```javascript



//对于系统定义好的数据源
<script src="${base.contextPath}/common/code?sdDataSource=FND.CODING_RULE_TYPE" type="text/javascript"></script>


//自定义静态数据源sdDataSource
var sdDataSource= new kendo.data.DataSource({
    data:["one","two"]
});

//自定义动态查询到的数据源sdDataSource
$.ajax({
    type : 'GET',
    url : url,
    async: false, 
    contentType : "application/json; charset=utf-8",
    success : function(datas) {
        viewModel.set("sdDataSource,",datas.rows);
    }
});

//需要注意,bind中写dataSource,需要在viewModel中定义
var viewModel = kendo.observable({
	enabled: true,
	isEnabled: false,
	data: {},
    sdDataSource:sdDataSource, 
});

//下拉列表渲染函数
var itemTemplate = function (){
    //...
}

//选中某一个列表选项后触发
function onComboboxChange(e){
    var value = this.value();
    // Use the value of the widget.
}
//以上两种函数定义方法皆可
```

```xml
    <h:hlsCombobox name="hlsCombobox" id="hlsCombobox"
                   bind="enabled: isEnabled,source: sdDataSource, value:data.code"
                   colspan="3"
                   dataTextField="meaning"
                   dataValueField="code"
                   placeholder="hlsCombobox"
                   prompt="hlsCombobox"
                   promptColspan="1"
                   valuePrimitive="true"
                   style="width:100
                   change="onComboboxChange"
                   template="fn:itemTemplate"
                   
    />
```
#### 特别注意 valuePrimitive="true" 如果该值为false,选中的值将不会匹配给dataTextField和dataValueField
dataValueField
> **提示:** 某些属性类型为**String \| Function** 时,表明它可以定义为字符串或者函数。因此当需要定义为Function时需要增加前缀**fn:**来区分(例如函数template="fn:itemTemplate" )