jquery自定义下拉列表示例

下面我来详细讲解一下“jQuery自定义下拉列表”的制作方法。

1. 简介

自定义下拉列表可以提升页面的交互体验，并且可以使页面更加美观。本文将使用jQuery来创建自定义下拉列表，包括如何使用HTML、CSS和JavaScript来实现。

2. 实现过程

下面我们以两个示例来详细讲解如何实现自定义下拉列表。

示例一

在这个示例中，我们将使用一个普通的<select>元素，然后使用jQuery来使其变成可自定义样式的下拉列表。

首先，我们需要在HTML中定义一个<select>元素，代码如下：

<select class="my-select">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

接下来，在CSS中定义自定义样式，代码如下：

.select-box {
  position: relative;
  display: inline-block;
}

.my-select {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.select-value {
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: 8px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.select-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  z-index: 2;
}

.select-menu-item {
  display: block;
  padding: 8px;
  cursor: pointer;
}

.select-menu-item:hover {
  background-color: #f5f5f5;
}

代码中，我们将实际的<select>元素隐藏了，然后用一个<div>元素来代替它，并定义了一些自定义样式。

最后，我们在JavaScript中实现下拉列表的功能，代码如下：

$('.my-select').each(function() {
  var $this = $(this),
      $wrapper = $('<div class="select-box"></div>'),
      $value = $('<div class="select-value"></div>'),
      $menu = $('<div class="select-menu"></div>'),
      $options = $this.find('option');

  $options.each(function() {
    var $option = $(this),
        $menuItem = $('<div class="select-menu-item"></div>');

    $menuItem.text($option.text()).data('value', $option.val());
    $menu.append($menuItem);
  });

  $wrapper.append($value, $menu);
  $this.after($wrapper);

  $value.text($options.first().text());

  $value.on('click', function() {
    $menu.toggle();
  });

  $menu.on('click', '.select-menu-item', function() {
    var $menuItem = $(this),
        value = $menuItem.data('value');

    $value.text($menuItem.text());
    $this.val(value);
    $menu.hide();
  });
});

代码中，我们遍历所有的<select>元素，然后创建出自定义样式的下拉列表。当用户点击下拉列表选择框时，下拉菜单将展开，用户可以选择其中的每一项。选项一旦被选择，将被设置为下拉菜单的显示值。

示例二

这个示例中，我们要实现一个搜索下拉框，用户可以在选项中进行筛选。

首先，我们需要在HTML中定义一个<input>元素和一个<ul>元素，代码如下：

<div class="search-box">
  <input type="text" class="search-input" placeholder="搜索...">
  <ul class="select-menu"></ul>
</div>

接下来，在CSS中定义自定义样式，代码如下：

.select-menu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.select-menu-item {
  display: block;
  padding: 8px;
  cursor: pointer;
}

.select-menu-item:hover {
  background-color: #f5f5f5;
}

.search-box {
  position: relative;
  display: inline-block;
}

.search-input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

这里定义了一个<ul>元素，其中每一个<li>元素代表下拉选择框的每项。此外，我们也定义了搜索框的样式。

最后，在JavaScript中实现搜索功能，代码如下：

var $searchBox = $('.search-box'),
    $options = $('.my-select > option');

$('.search-input').on('keyup', function() {
  var keyword = $.trim(this.value),
      pattern = new RegExp(keyword, 'gi'),
      html = '';

  $options.each(function() {
    var $option = $(this);
    if ($option.text().match(pattern)) {
      html += '<li class="select-menu-item " data-value="' + $option.val() + '">' + $option.text() + '</li>';
    }
  });

  $searchBox.find('.select-menu').html(html).show();
});

$searchBox.on('click', '.select-menu-item', function() {
  var $menuItem = $(this),
      value = $menuItem.data('value');

  $searchBox.find('.search-input').val($menuItem.text());
  $searchBox.find('.my-select').val(value);
  $searchBox.find('.select-menu').hide();
});

代码中，我们为<input>元素绑定keyup事件，当用户输入内容时，会将所有的选项进行匹配，并且只显示符合条件的选项。

当用户点击了一个选项时，会将它设置为下拉菜单的显示值，并且将其对应的<option>元素设置为被选中的状态。

3. 总结

通过上述两个示例的演示，我们可以看到使用jQuery自定义下拉列表的方法并不难，只需要熟练地运用HTML、CSS和JavaScript，就可以轻松实现出漂亮的自定义下拉列表。