27
<select >
<option value="something">something</option>
<option value="something_else">something else</option>
</select>
<input type="text" >
因此，當用戶輸入內容時，只會顯示與輸入值匹配的選項。如何使用jQuery動態篩選<select >的選項？
A
回答
8
我不知道爲什麼你有相同的值不止一個選項，但這個工程
$(document).ready(function() {
$('input').change(function() {
var filter = $(this).val();
$('option').each(function() {
if ($(this).val() == filter) {
$(this).show();
} else {
$(this).hide();
}
$('select').val(filter);
})
})
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="something1">something1</option>
<option value="something1">something1</option>
<option value="something2">something2</option>
<option value="something2">something2</option>
<option value="something2">something2</option>
<option value="something3">something3</option>
<option value="something3">something3</option>
<option value="something3">something3</option>
</select>
<input type="text" placeholder="something1">
69
示例HTML：
//jQuery extension method:
jQuery.fn.filterByText = function(textbox) {
return this.each(function() {
var select = this;
var options = [];
$(select).find('option').each(function() {
options.push({
value: $(this).val(),
text: $(this).text()
});
});
$(select).data('options', options);
$(textbox).bind('change keyup', function() {
var options = $(select).empty().data('options');
var search = $.trim($(this).val());
var regex = new RegExp(search, "gi");
$.each(options, function(i) {
var option = options[i];
if (option.text.match(regex) !== null) {
$(select).append(
$('<option>').text(option.text).val(option.value)
);
}
});
});
});
};
// You could use it like this:
$(function() {
$('select').filterByText($('input'));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="hello">hello</option>
<option value="world">world</option>
<option value="lorem">lorem</option>
<option value="ipsum">ipsum</option>
<option value="lorem ipsum">lorem ipsum</option>
</select>
<input type="text">現場演示這裏： http://www.lessanvaezi.com/filter-select-list-options/
+0
謝謝非常多的片段。這節省了我很多時間在一個小項目上的時間 - 像魅力一樣工作！ – 2011-08-14 04:29:42
+0
這很好，但在我的情況下，在加載頁面後，filter-textbox可能會包含一些文本。如何在加載頁面後立即啓動過濾？ – 2011-11-04 12:56:50
+0
找到了！ '$（'input'）。change（）;' – 2011-11-04 13:14:39
3
這是你克隆列表中的選項，並讓他們在一個對象恢復後，一個簡單的解決方案。腳本清除列表並只添加包含輸入文本的選項。這也應該跨瀏覽器。我得到了這個職位有所幫助：https://stackoverflow.com/a/5748709/542141
的Html
<input id="search_input" placeholder="Type to filter">
<select id="theList" class="List" multiple="multiple">
或剃刀
@Html.ListBoxFor(g => g.SelectedItem, Model.items, new { @class = "List", @id = "theList" })
腳本
<script type="text/javascript">
$(document).ready(function() {
//copy options
var options = $('#theList option').clone();
//react on keyup in textbox
$('#search_input').keyup(function() {
var val = $(this).val();
$('#theList').empty();
//take only the options containing your filter text or all if empty
options.filter(function (idx, el) {
return val === '' || $(el).text().indexOf(val) >= 0;
}).appendTo('#theList');//add it to list
});
});
</script>
0
更新Lessan的答案也保留選項的屬性。
這是我第一次回答堆棧溢出，所以不知道我是否應該編輯他的答案或創建我自己的答案。
jQuery.fn.allAttr = function() {
var a, aLength, attributes, map;
if (!this[0]) return null;
if (arguments.length === 0) {
map = {};
attributes = this[0].attributes;
aLength = attributes.length;
for (a = 0; a < aLength; a++) {
map[attributes[a].name.toLowerCase()] = attributes[a].value;
}
return map;
} else {
for (var propin arguments[0]) {
$(this[0]).attr(prop, arguments[0][prop]);
}
return this[0];
}
};
jQuery.fn.filterByText = function(textbox) {
return this.each(function() {
var select = this;
var options = [];
$(select).find('option').each(function() {
options.push({ value: $(this).val(),
text: $(this).text(),
allAttr: $(this).allAttr() });
});
$(select).data('options', options);
$(textbox).bind('change keyup', function() {
var search = $.trim($(this).val());
var regex = new RegExp(search, "gi");
$.each($(select).empty().data('options'), function(i, option) {
if (option.text.match(regex) !== null) {
$(select).append(
$('<option>').text(option.text)
.val(option.value)
.allAttr(option.allAttr)
);
}
});
});
});
};
+0
隱藏那些你不想要的選項會容易得多。 – Dementic 2013-08-02 17:01:07
5
所有其他略有不同，但我認爲這是最簡單的：
$(document).ready(function(){
var $this, i, filter,
$input = $('#my_other_id'),
$options = $('#my_id').find('option');
$input.keyup(function(){
filter = $(this).val();
i = 1;
$options.each(function(){
$this = $(this);
$this.removeAttr('selected');
if ($this.text().indexOf(filter) != -1) {
$this.show();
if(i == 1){
$this.attr('selected', 'selected');
}
i++;
} else {
$this.hide();
}
});
});
});
+0
Mottie和Hersker的混合 – 2013-09-09 13:49:25
0
您可以使用選擇2插件創建這樣一個過濾器。有了這批的編碼工作可以避免。你可以從https://select2.github.io/獲取插件
這個插件應用起來非常簡單，甚至高級工作都可以輕鬆完成。 :)
0
我有一個類似的問題這一點，所以我改變了接受的答案，使功能更寬泛的版本。我想我會把它留在這裏。
var filterSelectOptions = function($select, callback) {
var options = null,
dataOptions = $select.data('options');
if (typeof dataOptions === 'undefined') {
options = [];
$select.children('option').each(function() {
var $this = $(this);
options.push({value: $this.val(), text: $this.text()});
});
$select.data('options', options);
} else {
options = dataOptions;
}
$select.empty();
$.each(options, function(i) {
var option = options[i];
if(callback(option)) {
$select.append(
$('<option/>').text(option.text).val(option.value)
);
}
});
};
0
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script language='javascript'>
jQuery.fn.filterByText = function(textbox, selectSingleMatch) {
return this.each(function() {
var select = this;`enter code here`
var options = [];
$(select).find('option').each(function() {
options.push({value: $(this).val(), text: $(this).text()});
});
$(select).data('options', options);
$(textbox).bind('change keyup', function() {
var options = $(select).empty().scrollTop(0).data('options');
var search = $.trim($(this).val());
var regex = new RegExp(search,'gi');
$.each(options, function(i) {
var option = options[i];
if(option.text.match(regex) !== null) {
$(select).append(
$('<option>').text(option.text).val(option.value)
);
}
});
if (selectSingleMatch === true &&
$(select).children().length === 1) {
$(select).children().get(0).selected = true;
}
});
});
};
$(function() {
$('#selectorHtmlElement').filterByText($('#textboxFiltr2'), true);
});
</script>
1
很多簡單的代碼，然後大多數其他的解決方案。查找文本（不區分大小寫），並使用CSS來隱藏/顯示內容。比存儲數據副本要好得多。
傳入此方法的選擇框的id和包含過濾器的輸入的id。
function FilterSelectList(selectListId, filterId)
{
var filter = $("#" + filterId).val();
filter = filter.toUpperCase();
var options = $("#" + selectListId + " option");
for (var i = 0; i < options.length; i++)
{
if (options[i].text.toUpperCase().indexOf(filter) < 0)
$(options[i]).css("display", "none");
else
$(options[i]).css("display", "block");
}
};
相關問題
- 1. 使用jQuery與<select>選項
- 2. 如何使用jQuery選擇一個<select>選項？
- 3. 根據其他<select>選項禁用<select>選項
- 4. 使<select>選項
- 5. jQuery的<select>選項，如果在多個選定<select>箱
- 6. 從<select>使用jQuery輸入的篩選器表
- 7. 使用webdriver.js，如何獲得<select>的選定選項？
- 8. 如何通過<select> id和<option>值使用jQuery找到<select>選項中的文本？
- 9. 如何使用jQuery在<select></select>標記中選擇一個選項？
- 10. 使用javascript過濾選項<select>？
- 11. 使用jQuery + Multi選擇<select>
- 12. 如何使用jQuery標記基於初始值選擇的<select>選項？
- 13. 如何根據選擇的其他<select>選項禁用<select>選項？
- 14. 如何用jQuery更改<select>的選項？
- 15. 否選項在<select>
- 16. jQuery.tmpl和<select>選項
- 17. 如何將<select>中的選項動態分組到選擇組中？
- 18. 讓<select>選項「單擊」自動
- 19. 其中<select>更改另一個選項中的選項<select>
- 20. Angularjs - 從其他<select>組件中篩選選定的選項
- 21. 改變<select>選項使用jQuery的.change功能
- 22. 通過JQuery自動選擇<option>動態加載<select>
- 23. 如何填寫使用PHP和SQL的選項<select>？
- 24. 如何根據另一選項選項限制<select>中的選項
- 25. 使用jQuery快速清除多選中啓用的所有選項<select>？
- 26. 角2 - 如何設置默認<select>選擇的選項
- 27. 如何設置選定的選項<select>
- 28. 如何獲得角度中的選定選項<select>
- 29. 如何使用多行選項構建<select>？
- 30. 動態添加選項元素到<select>在電子
我想實現這一點，但它可能不是跨瀏覽器兼容http://stackoverflow.com/questions/1271503/hide-options-in-a-select-list-using-jquery – James 2011-08-04 22:37:10