select2怎么设置图标
时间: 2023-10-25 16:11:57 浏览: 13
要在Select2中设置图标,您需要使用CSS样式和一些HTML标记。
以下是一个示例,演示如何在Select2中添加图标:
HTML:
```html
<select id="mySelect">
<option value="1" data-icon="fa fa-user">John</option>
<option value="2" data-icon="fa fa-envelope">Email</option>
<option value="3" data-icon="fa fa-phone">Phone</option>
</select>
```
在每个选项中,您需要使用“data-icon”属性来指定要使用的图标。在这个例子中,我们使用了Font Awesome图标库。
CSS:
```css
.select2-results__option .fa {
margin-right: 5px;
}
```
此CSS样式将在每个选项中添加5像素的右边距,以便在图标和文本之间留出一些空间。
JavaScript:
```javascript
$('#mySelect').select2({
templateResult: formatState
});
function formatState (state) {
if (!state.id) {
return state.text;
}
var $state = $(
'<span><i class="' + $(state.element).data('icon') + '"></i> ' + state.text + '</span>'
);
return $state;
};
```
在这个JavaScript代码中,我们使用“templateResult”选项来指定一个函数,该函数将为每个选项创建自定义HTML标记。在“formatState”函数中,我们使用选项中的“data-icon”属性来添加图标,并在图标和文本之间添加一个空格。
请注意,这个示例假定您已经加载了jQuery和Select2库。如果您还没有这些库,请确保将它们添加到您的项目中。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)