jQuery過濾器表包括 <select><option>細胞
[英]jQuery filter table includes <select> <option> cell
問題描述
我是jQuery新手。 我有一個表格，該表格在下面的單元格中包含<select><option>標記。
<html>
<input type="text" id="searchInput">
<table border=1>
<thead>
<th>ID</th><th>Name</th><th>position</th>
</thead>
<tbody id="fbody">
<tr>
<td>1</td>
<td>A</td>
<td><select>
<option selected>front</option>
<option>center</option>
<option>back</option>
</select>
</td>
</tr>
<tr>
<td>2</td>
<td>B</td>
<td><select>
<option>front</option>
<option selected>center</option>
<option>back</option>
</select>
</td>
</tr>
</tbody>
</table>
</html>
我找到了一個類似於下面的jQuery代碼，並且試圖過濾上表。 但這在<select><option>單元格上無法正常工作。 我想知道如何使代碼能夠進行過濾以獲取選定的值。
我想做的是，當我在輸入框中鍵入“ center”時，僅顯示第二行。
<script>
$("#searchInput").keyup(function () {
console.log("value=%o", this.value);
//split the current value of searchInput
var data = this.value.split(" ");
//create a jquery object of the rows
var jo = $("#fbody").find("tr")
//hide all the rows
.hide();
//Recusively filter the jquery object to get results.
jo.filter(function (i, v) {
var $t = $(this);
for (var d = 0; d < data.length; ++d) {
if ($t.is(":contains('" + data[d] + "')")) {
console.log(data[d]);
return true;
}
}
return false;
})
//show the rows that match.
.show();
}).focus(function () {
this.value = "";
$(this).css({
"color": "black"
});
$(this).unbind('focus');
}).css({
"color": "#C0C0C0"
});
</script>
2 個解決方案
解決方案1
0 2015-12-17 06:11:00
嘗試使用:selected
if ($t.find('> select > option').is(":selected:contains('" + data[d] + "')")) {
解決方案2
0 已采納 2015-12-17 06:12:36
您可以嘗試將過濾條件更改為
jo.each(function () {
$( this ).find( "td select option:selected" ).each( function(){
for (var d = 0; d < data.length; ++d)
{
if ( $( this ).text() == data[d] )
{
console.log(data[d]);
$( this ).parent("tr").show();
break;
}
}
})
});
甚至簡單地
$("#fbody").find("option:selected").each(function () {
if ( data.indexOf( $( this ).text() ) != -1 ) //updated this line
{
$( this ).parent().parent().parent().show();
}
});
如果要將TD中的部分值與在文本框中輸入的值進行比較
$( data ).each( function ( index, valueArr ){
if ( value.indexOf( valueArr ) != -1 )
{
$td.parent().show();
}
} );
篩選按選項值選擇的jquery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.