帮我写一个基于jquery的select选项搜索组件

我可以为您提供一个基于 jQuery 的 select 选项搜索组件的示例代码：// HTML 代码
<select id="mySelect">
<option>Apple</option>
<option>Orange</option>
<option>Banana</option>
<option>Pineapple</option>
</select>// jQuery 代码
$('#mySelect').on('keyup', function() {
var value = $(this).val().toLowerCase();
$('#mySelect > option').filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});

相关问题

JQuery WEUI Select 组件增加搜索栏

JQuery WEUI Select组件本身不提供搜索栏功能，但你可以通过以下步骤实现：

1. 在页面中添加一个搜索框，例如：

<div class="weui-search-bar" id="searchBar">
  <form class="weui-search-bar__form">
    <div class="weui-search-bar__box">
      <i class="weui-icon-search"></i>
      <input type="search" class="weui-search-bar__input" placeholder="搜索" required="">
      <a href="javascript:" class="weui-icon-clear"></a>
    </div>
    <label class="weui-search-bar__label">
      <i class="weui-icon-search"></i>
      <span>搜索</span>
    </label>
  </form>
  <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
</div>

2. 给Select组件添加一个点击事件，在该事件中显示搜索框并隐藏Select组件，例如：

$('#selectBtn').on('click', function () {
  $('#searchBar').show();
  $('#select').hide();
});

3. 给搜索框的取消按钮添加一个点击事件，在该事件中隐藏搜索框并显示Select组件，例如：

$('#searchCancel').on('click', function () {
  $('#searchBar').hide();
  $('#select').show();
});

4. 在搜索框的输入事件中，根据输入内容筛选Select组件的选项，例如：

$('.weui-search-bar__input').on('input', function () {
  var value = $(this).val().toLowerCase();
  $('#select .weui-select__option').each(function () {
    var optionValue = $(this).text().toLowerCase();
    if (optionValue.indexOf(value) > -1) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
});

通过以上步骤，你就可以在JQuery WEUI Select组件中添加搜索栏功能了。

jquery获取页面中多个 select 组件选中的值

可以使用 jQuery 中的 `val()` 方法来获取页面中多个 select 组件选中的值。

以下是一个示例代码：

<select class="myList" multiple>
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

<select class="myList" multiple>
  <option value="4">选项4</option>
  <option value="5">选项5</option>
  <option value="6">选项6</option>
</select>

<button onclick="getSelectedOptions()">获取选中项</button>

<script>
  function getSelectedOptions() {
    var selectedOptions = $('.myList').map(function() {
      return $(this).val();
    }).get();
    console.log(selectedOptions);
  }
</script>

当用户点击“获取选中项”按钮时，`getSelectedOptions` 函数会获取所有 class 为 `myList` 的 select 元素的选中项，然后将所有选中项的值输出到控制台。

注意，由于 select 元素有多选和单选两种模式，如果要获取所有选中项的值，需要将 select 元素的 `multiple` 属性设置为 `true`。另外，`map()` 方法会返回一个包含所有选中项的值的数组，可以通过 `get()` 方法将其转换为普通的 JavaScript 数组。