下拉列表(Select/Dropdown)是HTML表单中的常见元素,允许用户从预定义的选项列表中选择一个或多个值。基本HTML结构如下:
<select id="mySelect">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
jQuery是一个快速、简洁的JavaScript库,简化了HTML文档遍历、事件处理、动画和Ajax交互。
// 获取选中值
$('#mySelect').val();
// 设置选中值
$('#mySelect').val('2');
// 获取选中文本
$('#mySelect option:selected').text();
// 添加选项
$('#mySelect').append('<option value="4">新选项</option>');
// 删除所有选项
$('#mySelect').empty();
// 删除特定选项
$('#mySelect option[value="2"]').remove();
// 选中变化事件
$('#mySelect').change(function() {
console.log('选中值变为: ' + $(this).val());
});
// 手动触发事件
$('#mySelect').trigger('change');
<select id="multiSelect" multiple>
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
// 获取多选值数组
$('#multiSelect').val(); // 返回数组
// 设置多选值
$('#multiSelect').val(['1', '3']);
原因:事件绑定在元素创建之前,或使用了错误的委托方式。
解决方案:
// 使用事件委托
$(document).on('change', '#mySelect', function() {
// 处理逻辑
});
原因:IE对某些jQuery方法的实现不同。
解决方案:
// 获取选中文本的兼容写法
$('#mySelect').find('option:selected').text();
原因:DOM操作过多导致性能下降。
解决方案:
// 使用文档片段批量添加
var options = [];
for(var i=0; i<1000; i++) {
options.push('<option value="'+i+'">选项'+i+'</option>');
}
$('#mySelect').html(options.join(''));
<select id="province">
<option value="">请选择省份</option>
<option value="1">北京</option>
<option value="2">上海</option>
</select>
<select id="city">
<option value="">请选择城市</option>
</select>
var cityData = {
'1': ['东城区', '西城区', '朝阳区'],
'2': ['黄浦区', '徐汇区', '长宁区']
};
$('#province').change(function() {
var provinceId = $(this).val();
var $city = $('#city').empty().append('<option value="">请选择城市</option>');
if(provinceId) {
$.each(cityData[provinceId], function(i, city) {
$city.append('<option value="'+i+'">'+city+'</option>');
});
}
});
没有搜到相关的文章