当前位置:主页 > JavsScript库 > 表单 >

自定义选择输入框 – Selectra
栏目分类:表单   发布日期:2021-08-28   浏览次数:

Selectra 是一个 JavaScript 库,用于使用纯 JavaScript 创建动态、完全样式化、高度可定制的选择框。

可以用作已知jQuery select2 插件的绝佳替代品。

特征:

  • 支持多选。

  • 支持嵌套 optgroup。

  • 支持实时搜索。

  • 支持从 JavaScript 加载数据。

  • 与 Bootstrap 等第三方框架兼容。

  • 也可用作 Vue 组件或自定义 Web 组件。

使用:

1. 安装并导入 Selectra。

# NPM 
$ npm i selectra --save
// 作为 ES 模块
import Selectra, { createSelectra } from 'selectra'
@import "selectra/src/scss/index.scss"
// 浏览器
<link rel="stylesheet" href="./selectra.min.css" /> 
<script src="./selectra.min.js"></script>

2. 在目标选择元素上初始化 Selectra 并完成。

<select name="&quot; id="selectCustom">
  <option value="c" selected>html</option>
  <option value="s">369</option>
  <option value="m">cn</option>
  <option value="disabled" disabled>Disabled</option>
</select>
const customSelectra = new Selectra('#selectCustom')
customSelectra.init()


3. 或者从 JavaScript 数组加载数据,如下所示:

createSelectra('#selectCustom', { 
  options: [ 
    { 
      value: 'c', 
      label: 'html'
    }, 
    { 
      value: 's', 
      label: '369'
    }, 
    { 
      value: 'm', 
      label: 'cn', 
      selected: true
    }, 
    { 
      value: 'd', 
      label: 'Disabled', 
      disabled: true
    } 
  ] 
})


4. 也支持嵌套选项。

createSelectra('#selectCustom', { 
  options: [ 
    { 
      label: 'Group 1', 
      options: [ 
        { value: 'c', label: 'html' }, 
        { value: 's', label: '369', selected : true } 
      ] 
    }, 
    { 
      label: 'Group 2', 
      options: [ 
        { value: 'd', label: 'Disabled', disabled: true }, 
        { value: 'm', label: 'cn' } 
      ] 
    } 
  ] 
})

5. 启用/禁用搜索字段。

createSelectra('#selectCustom', {
 
  // 启用实时搜索
  search: false,
 
  // 搜索字段中的占位符
  langInputPlaceholder: 'Search',
 
  // 空时占位符
  langEmptyValuePlaceholder: 'Pick a value',
   
})

6.在Vue中使用组件。

new Vue({
    el: '#vue-app',
    mounted () {
      createSelectra('#targetSelect')
    },
    data () {
      return {
        value: false,
        values: ['option1', 'option2'],
        options: [
          { value: 'option1', label: 'Option 1' },
          { value: 'option2', label: 'Option 2' }
        ]
      }
    }
})

7. 设置和获取选项值。

// 获取值
document.querySelector('#selectCustom').val();
 
// 设置值
document.querySelector('#selectCustom').val(['option1', 'option2']);


官方网站:https://github.com/cirykpopeye/selectra

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库