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.