select 绑定数据源
时间: 2023-11-23 11:56:22 浏览: 35
以下是两种select绑定数据源的例子:
1. 本地数据方式
```html
<!-- 引入select2的css和js文件 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<!-- HTML代码 -->
<select class="downList1"></select>
<!-- JavaScript代码 -->
<script type="text/javascript">
var dataList = [
{ id: 0, text: 'ljiong.com(老囧博客)' },
{ id: 1, text: 'Ants(蚂蚁)' },
{ id: 2, text: 'can you speak javascript(你能讲JavaScript嘛)' },
{ id: 3, text: 'vae(许嵩)' },
{ id: 4, text: 'Badminton(羽毛球)' }
];
$(".downList1").select2({
data: dataList,
placeholder:'请选择',//默认文字提示
language: "zh-CN",//汉化
allowClear: true//允许清空
});
</script>
```
2. 动态绑定数据源(通过ajax)
```html
<!-- 引入select2的css和js文件 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<!-- HTML代码 -->
<select class="downList2"></select>
<!-- JavaScript代码 -->
<script type="text/javascript">
$(".downList2").select2({
ajax: {
url: "your_url",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
params.page = params.page || 1;
return {
results: data.items,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
placeholder:'请选择',//默认文字提示
language: "zh-CN",//汉化
allowClear: true//允许清空
});
</script>
```