有没有办法使用 jQuery 过滤多行选择框?
我是 jQuery 的新手,似乎无法找出最好的方法。
例如,如果我有:
<select size="10">
<option>abc</option>
<option>acb</option>
<option>a</option>
<option>bca</option>
<option>bac</option>
<option>cab</option>
<option>cba</option>
...
</select>
我想根据选择下拉列表过滤此列表:
<select>
<option value="a">Filter by a</option>
<option value="b">Filter by b</option>
<option value="c">Filter by c</option>
</select>
最佳答案
这样的事情可能会成功(假设你给你的'Filter by...'选择一个ID filter 和过滤/其他选择一个ID otherOptions):
$(document).ready(function() {
$('#filter').change(function() {
var selectedFilter = $(this).val();
$('#otherOptions option').show().each(function(i) {
var $currentOption = $(this);
if ($currentOption.val().indexOf(selectedFilter) !== 0) {
$currentOption.hide();
}
});
});
});
更新:正如@Brian Liang 在评论中指出的那样,将
$(document).ready(function() {
var allOptions = {};
$('#otherOptions option').each(function(i) {
var $currentOption = $(this);
allOptions[$currentOption.val()] = $currentOption.text();
});
$('#filter').change(function() {
// Reset the filtered select before applying the filter again
setOptions('#otherOptions', allOptions);
var selectedFilter = $(this).val();
var filteredOptions = {};
$('#otherOptions option').each(function(i) {
var $currentOption = $(this);
if ($currentOption.val().indexOf(selectedFilter) === 0) {
filteredOptions[$currentOption.val()] = $currentOption.text();
}
});
setOptions('#otherOptions', filteredOptions);
});
function setOptions(selectId, filteredOptions) {
var $select = $(selectId);
$select.html('');
var options = new Array();
for (var i in filteredOptions) {
options.push('<option value="');
options.push(i);
options.push('">');
options.push(filteredOptions[i]);
options.push('</option>');
}
$select.html(options.join(''));
}
});
关于javascript - jQuery 过滤,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/848338/