选择框是为用户提供一些选择的简单方法。但通常你需要更多，尤其是在搜索列表中的项目时。

这个jQuery插件为您提供了自定义的选择框和一系列功能，以增强用户和浏览器之间的交互。它允许您在选择框中搜索、显示和删除选项，并在选择多个项目时为用户提供更好的用户体验。

参见：

• 替换Native Select Box的10个最佳下拉插件

如何使用它:

1.下载并加载iv-选择.jsjQuery库之后的插件。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/iv-select.js"></script>

2.加载必要的W3.css以设置选择框的样式。

<link rel="stylesheet" href="/path/to/cdn/w3.min.css" />

3.转换本机选择元素添加到增强型选择框中：

<select name="cars" id="example" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

$('#example').iv_selectConvert({
  // options here
});

4.使用数据iv初始值属性：

<select name="cars" id="example" multiple data-iv-init-value="saab|audi">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

5.自定义选择框的完整插件选项：

$('#example').iv_selectConvert({
  placeholder: "Type to search",
  text_el_class: "w3-input w3-border",
  text_el_style: "",
  class_for_search: "w3-block",
  search_style: "",
  class_for_value: "",
  container_class: "",
  options_container_class: "",
  options_container_style: "",
  option_class: "w3-block w3-button w3-hover-blue w3-border-left w3-border-right",
  option_style: "",
  keep_existing_class: 'toValue', // toText, toValue, toContainer
  close_after_click: true,
  no_search_element: false
});

6.获取和设置值：

// get value
$('#example').val();

// set value
$('#example').val('volvo');

// set values
$('#example').val(['volvo', 'saab']);

7.更多的方法和属性。

// update options
$('#example').iv_updateOptions(options);

// get options
$('#example').iv_getOptions();

// get values as an array
$('#example').iv_getValuesArray();

// check if is an ivSelect element
$('#example').is_ivSelect();

// check if is a text element
$('#example').iv_textEl();

// clone select box
$('#example').iv_cloneSelect{
  name: "",
  id: "",
  placeholder: "Type to search",
  text_el_class: "w3-input w3-border",
  text_el_style: "min-width:200px;background-color:white;",
  container_class: "",
  container_style: "",
  options_container_class: "",
  options_container_style: "",
  option_class: "w3-block w3-button w3-hover-blue w3-border-left w3-border-right",
  option_style: "",
  remove_unselected: true,
  close_after_click: true
}

更新日志：

2023-02-04

• 更改元素顺序以固定绝对位置

2023-01-03

• 修复搜索和选项容器元素定位

2023-01-01

• 更新的无冲突版本

2022-12-02

• 修复定位错误

2022-11-18

• 修复ivSelectOninvalid函数

2022-11-11

• 更改了一些样式

2022-11-10

• 在选项顶部粘贴搜索元素

2022-11-04

• 更新iv选择样式

2022-11-03

• 更新iv选择

2022-10-29

• 添加空值处理

2022-09-09

• 错误修复

预览截图

增强选择框并使选项可搜索 jQuery iv Select