前端随笔记

文本输入框提示

<input type="text" list="category" aria-describedby="basic-addon1" >
<datalist id="category">
    <option value="派大星">
    <option value="海绵宝宝">
    <option value="章鱼哥">
</datalist>

复选框—搜索提示下拉框

引入JS：bootstrap-select.js

<select id="selectTest" data-live-search="true" title="请选择" class="selectpicker" multiple>
    <option user_id=“1”>小华</option>
    <option user_id=“2”>小明</option>
    <option user_id=“3”>小心</option>
    <option user_id=“4”>天天</option>
</select>

JS中初始

// 初始化
$('.selectpicker').selectpicker();
// 选中事件
$('.selectpicker').on('changed.bs.select',function(){
   $('#selectTest').find("option:selected").each(function () {
       console.log($(this).attr('user_id'));
   })
   console.log($('.selectpicker').selectpicker('val'))
});

更详细配置请参考文档：https://developer.snapappointments.com/bootstrap-select/options/

下拉框列表自定义样式

将html样式写到data-content中

1
2
3

<select class="selectpicker">
  <option data-content="<span class='label label-success'>Relish</span>">刷新</option>
</select>