gpt4 book ai didi

javascript - 根据多个下拉选择隐藏/显示行(过滤)

转载 作者:数据小太阳 更新时间:2023-10-29 05:23:27 26 4
gpt4 key购买 nike

所以我的问题是这样的。我有一个表,我根据下拉菜单选择隐藏/显示行。想要的是 2 个菜单一起工作而不是独立工作。如果我在第一个下拉列表中选择一个项目,我希望能够使用第二个下拉列表进一步过滤该项目,依此类推任何其他下拉列表。这是我正在使用的代码,目前可以独立运行。

    <script>
$(document).ready(function(){
$('select#age').bind('change',function(){
if($(this).val()=='Show All'){
$('td.age').parent().show();
}else{
$('td.age').parent().hide();
$('td.age:contains("'+$(this).val()+'")').parent().show();
}
$('#counts').html( $('table.data_table tr:visible').length-1 + ' Registered Kids' )
})
$('select#sport').bind('change',function(){
if($(this).val()=='Show All'){
$('td.sport').parent().show();
}else{
$('td.sport').parent().hide();
$('td.sport:contains("'+$(this).val()+'")').parent().show();
}
$('#counts').html( $('table.data_table tr:visible').length-1 + ' Registered Kids' )
})
})
</script>

最佳答案

String.prototype.replaceAll = function(search, replacement) {
var target = this;
return target.replace(new RegExp(search, 'g'), replacement);
};

$(document).ready(function() {
var ddlFilterTableRow = $('select.ddlFilterTableRow'),
headerCount = $('#headerCount');
headerCount.html($('#tableRegisterKids').find('.Row').length + ' Registered Kids');

ddlFilterTableRow.on('change', function() {
ddlFilterTableRow.attr('disabled', 'disabled');

var records = $('#tableRegisterKids').find('.Row');
records.hide();

var critriaAttributes = [];
ddlFilterTableRow.each(function() {
var $this = $(this),
$selectedLength = $this.find(':selected').length,
$critriaAttribute = '';

if ($selectedLength > 0 && $this.val() != '0') {
if ($selectedLength == 1) {
$critriaAttribute += '[data-' + $this.data('attribute') + '*="' + $this.val() + '"]';
} else {
var $startDataAttribute = '[data-' + $this.data('attribute') + '*="',
$endDataAttribute = '"]',
$selectedValues = $this.val().toString();

$critriaAttribute += $startDataAttribute + $selectedValues.replaceAll(',', ($endDataAttribute + ',' + $startDataAttribute)) + $endDataAttribute;
}
critriaAttributes.push($critriaAttribute);
}
});

var $showRecords = records;
if (critriaAttributes.length > 0) {
$.each(critriaAttributes, function(i, filterValue) {
$showRecords = $showRecords.filter(filterValue);
});
}
$showRecords.show();

headerCount.html($showRecords.length + ' Registered Kids');

ddlFilterTableRow.removeAttr('disabled');
});
});

//=========================================== ===================//

<select id="ddlAge" class="ddlFilterTableRow" data-attribute="age">
<option value="0">Select All</option>
<option value="10">10</option>
<option value="8">8</option>
<option value="6">6</option>
</select>
<select id="ddlSport" class="ddlFilterTableRow" data-attribute="sports">
<option value="0">Select All</option>
<option value="Foot Ball">Foot Ball</option>
<option value="Chess">Chess</option>
<option value="Cricket">Cricket</option>
</select>
<h1 id="headerCount"></h1>
<table id="tableRegisterKids">
<tr>
<th>Fullname</th>
<th>Age</th>
<th>Sport</th>
</tr>
<tr class="Row" data-age="10" data-sports="Foot Ball">
<td>Thulasiram.S</td>
<td>10</td>
<td>Foot Ball</td>
</tr>
<tr class="Row" data-age="8" data-sports="Cricket">
<td>ST Ram</td>
<td>8</td>
<td>Cricket</td>
</tr>
<tr class="Row" data-age="6" data-sports="Chess">
<td>Ram Kumar.S</td>
<td>6</td>
<td>Chess</td>
</tr>
<tr class="Row" data-age="8" data-sports="Chess">
<td>Dinesh Kumar.S</td>
<td>8</td>
<td>Chess</td>
</tr>
<tr class="Row" data-age="6" data-sports="Foot Ball">
<td>Raja Ram.S</td>
<td>6</td>
<td>Foot Ball</td>
</tr>
<tr class="Row" data-age="10" data-sports="Chess">
<td>Priya</td>
<td>10</td>
<td>Chess</td>
</tr>
</table>

请查找DEMO

关于javascript - 根据多个下拉选择隐藏/显示行(过滤),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14209680/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com