下面我来详细讲解一下“jQuery自定义下拉列表”的制作方法。
自定义下拉列表可以提升页面的交互体验,并且可以使页面更加美观。本文将使用jQuery来创建自定义下拉列表,包括如何使用HTML、CSS和JavaScript来实现。
下面我们以两个示例来详细讲解如何实现自定义下拉列表。
在这个示例中,我们将使用一个普通的<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>
元素设置为被选中的状态。
通过上述两个示例的演示,我们可以看到使用jQuery自定义下拉列表的方法并不难,只需要熟练地运用HTML、CSS和JavaScript,就可以轻松实现出漂亮的自定义下拉列表。
本文链接:http://task.lmcjl.com/news/13024.html