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

JavaScript中的自定义下拉选择框 - bvselect
栏目分类:表单   发布日期:2021-09-13   浏览次数:

这是jQuery bvselect 插件的原生JavaScript 版本,可将本机<select />元素转换为动画、可定制、适合移动设备的下拉列表。

特征:

  • 可过滤和可搜索。

  • 自动重新定位下拉列表以使其始终在屏幕上可见。

  • 自动将下拉列表转换为移动设备上的模式选择器。

  • 多选。

使用:

1. 加载 BVSelect 插件的 JavaScript 和样式表。

<link rel="stylesheet" href="css/bvselect.css" />
<script src="js/bvselect.js"></script>

2. 将函数 BVSelect 附加到<select />元素,插件将完成剩下的工作。

<select id="selectbox">
  <option data-separator="true" value="">Select...</option>
  <option value="jquery" selected>jQuery</option>
  <option value="javascript">JavaScript</option>
  <option value="angular" disabled>Angular</option>
  <option value="react">React</option>
  <option value="vue">Vue.js</option>
</select>
var mySelect = new BVSelect({
    selector: "#selectbox"
});

3. 在下拉菜单中添加一个搜索字段。

var mySelect = new BVSelect({
    selector: "#selectbox",
    searchbox: true
});

4. 指定下拉菜单的宽度。默认值:“100%”。

var mySelect = new BVSelect({
    selector: "#selectbox",
    width: '300px'
});

5. 将图像添加到选项的开头。

<select id="selectbox">
  <option value="">Select...</option>
  <option data-img="jquery.png" value="jquery" selected>jQuery</option>
  <option data-img="javascript.png" value="javascript">JavaScript</option>
  ...
</select>

6. 在选项的开头添加图标(本例中的字体真棒)。

<select id="selectbox">
  <option data-separator="true" value="" selected>Select...</option>
  <option data-icon="fa fa-profile" value="jquery" selected>jQuery</option>
  <option data-icon="fa fa-home" value="javascript">JavaScript</option>
  ...
</select>

7. 使下拉菜单始终在屏幕上可见。

var mySelect = new BVSelect({
    selector: "#selectbox",
    offset: true
});

8. 在移动设备上运行时,在模态弹出窗口中打开下拉菜单。

var mySelect = new BVSelect({
    selector: "#selectbox",
    breakpoint: 450
});

9. 自定义占位符文本。

var mySelect = new BVSelect({
    selector: "#selectbox",
    placeholder: "选择选项",
    search_placeholder: "搜索..."
});

10. 更改下拉选项。

mySelect.Change({
  placeholder: "新占位符",
  search_placeholder: "新搜索框的占位符",
  options : {
    0: {
      inner_text: 'Option 1',
      value: "1",
      disabled: false,
      separator: false,
      img: "1.png",
      icon: "fa fa-home"
    },
    1: {
      inner_text: 'Option 2',
      value: "2",
      disabled: false,
      separator: false,
      img: "2.png",
      icon: "fa fa-home"
    },
    // ...
  }
});
// 将更改应用于下拉列表
mySelect.Update();

11、更多的API方法。

// 销毁下拉列表
mySelect.Destroy();
 
// 获取ID
mySelect.GetID();
 
// 更改设置
mySelect.Change({
  placeholder: '',
  search_placeholder: '',
  options: {}
});
 
// 附加选项
mySelect.AppendOption({
  position: '',
  options: {}
});

官方网站:https://github.com/BMSVieira/BVSelect-VanillaJS

相关热词: BVSelect下拉选择框

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