multiple select filter in javasvript

multiple select filter in javasvript - javascript

i am using to multiple select filter, i am trying multi select and filter in my table, but i have an problem, if i select only one value data are filter and show in my table but when i select multiple values data are not filter and show.
function filterText() {
var rex = new RegExp($('#filterText').val());
alert(rex);
if (rex == "/all/") {
clearFilter()
} else {
$('.content').hide();
$('.content').filter(function() {
return rex.test($(this).text());
}).show();
}
}
function clearFilter() {
$('.filterText').val('');
$('.content').show();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='filterText' multiple="multiple" onchange='filterText()' name="filterText[]">
<option disabled selected>Select</option>
<option value='1'>Lower Case</option>
<option value='2'>Upper Case</option>
<option value='all'>All</option>
</select>
<table>
<tr class="content">
<td>Mark</td>
<td>Otto</td>
<td>Lower Case</td>
</tr>
<tr class="content">
<td>1</td>
<td>Larry</td>
<td>the Bird</td>
<td>Upper Case</td>
</tr>
<tr class="content">
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>Lower Case</td>
</tr>
<tr class="content">
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>Upper Case</td>
</tr>
</table>
I just want if i select Lowercase(value=1) and Uppercase(value=2) show both table.
Thanks.

Here is a fixed code.
$('#filterText').val() returns an array .join('|') makes the regex search either of the text available
function filterText() {
var rex = new RegExp($('#filterText').val().join('|'));
alert(rex);
if (rex == "/all/") {
clearFilter()
} else {
$('.content').hide();
$('.content').filter(function() {
return rex.test($(this).text());
}).show();
}
}
function clearFilter() {
$('.filterText').val('');
$('.content').show();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='filterText' multiple="multiple" onchange='filterText()' name="filterText[]">
<option disabled selected>Select</option>
<option value='Lower Case'>Lower Case</option>
<option value='Upper Case'>Upper Case</option>
<option value='all'>All</option>
</select>
<table>
<tr class="content">
<td>Mark</td>
<td>Otto</td>
<td>Lower Case</td>
</tr>
<tr class="content">
<td>1</td>
<td>Larry</td>
<td>the Bird</td>
<td>Upper Case</td>
</tr>
<tr class="content">
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>Lower Case</td>
</tr>
<tr class="content">
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>Upper Case</td>
</tr>
</table>

Related

How to filter data from options for special column jQuery

I work with the filtering data in the table, and i create script for filtering data.
But problem is that script filtering data in all table, but i need to filter data only in special rows.
Because i some row i can have same values, and filter will not work properly.
$('#test213').click(function() {
getSelectedVal()
filterData()
});
var filters = [];
function getSelectedVal() {
var startDate = $('#option1 option:selected').text()
var duetDate = $('#option2 option:selected').text()
var templateName = $('#option3 option:selected').text()
var status = $('#option4 option:selected').text()
applyFilter(startDate)
applyFilter(duetDate)
applyFilter(templateName)
applyFilter(status)
}
function applyFilter(value) {
if (value)
filters.push(':contains(' + value + ')')
}
function filterData() {
if (filters.length > 0) {
var rows = $("#shelulerData").find("tr").hide();
var currentFilter = null;
filters.forEach(filter => {
if (currentFilter === null) {
currentFilter = rows.filter(filter)
} else {
currentFilter = currentFilter.filter(filter)
}
})
currentFilter.show()
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="option1">
<option></option>
<option>Thulasiram.S</option>
<option>ST Ram</option>
<option>Ram Kumar.S</option>
<option>Dinesh Kumar.S </option>
</select>
<select id="option2">
<option></option>
<option>11</option>
<option>21</option>
<option>30</option>
</select>
<select id="option3">
<option></option>
<option>Chess</option>
<option>Cricket</option>
</select>
<select id="option4">
<option></option>
<option>Day</option>
<option>Month</option>
<option>Week</option>
</select>
<button id="test213">Add filter</button>
<table id="ticketList">
<thead>
</thead>
<tbody id="shelulerData">
<tr>
<th>Fullname</th>
<th>Age</th>
<th>Sport</th>
<th>Class </th>
<th>Term</th>
</tr>
<tr class="filter-row" data-age="11" data-class="1" data-term="Day">
<td>Thulasiram.S30</td>
<td>11</td>
<td>Chess</td>
<td>1</td>
<td>Day</td>
</tr>
<tr class="filter-row" data-age="11" data-class="1" data-term="Month">
<td>ST Ram</td>
<td>11</td>
<td>Cricket</td>
<td>1</td>
<td>Month</td>
</tr>
<tr class="filter-row" data-age="21" data-class="2" data-term="Day">
<td>Ram Kumar.S 30</td>
<td>21</td>
<td>Chess</td>
<td>2</td>
<td>Day</td>
</tr>
<tr class="filter-row" data-age="30" data-class="3" data-term="Week">
<td>Dinesh Kumar.S</td>
<td>30</td>
<td>Chess</td>
<td>3</td>
<td>Week</td>
</tr>
</tbody>
</table>
So if i will filter for value 30, which i need to find in row 2, it's will find all values in the table, but i need in just this row.

You need to know which filter corresponds to which column
To do this, give each of your columns a class/id and pass it to your applyFilter function.
Then search for filter value in that particular column and decide whether that row needs to be shown or not.
i.e. if the user wants to filter by age, search the age column in the table and show all rows that match the filtered age.
Check out the modified code below.
$('#test213').click(function() {
getSelectedVal()
filterData()
});
var filters = [];
function getSelectedVal() {
var startDate = $('#option1 option:selected').text()
var duetDate = $('#option2 option:selected').text()
var templateName = $('#option3 option:selected').text()
var status = $('#option4 option:selected').text()
applyFilter(startDate,1)
applyFilter(duetDate,2)
applyFilter(templateName,1)
applyFilter(status,2)
}
function applyFilter(value,id) {
if (value)
filters.push('.col'+id+':contains(' + value + ')');
}
function filterData() {
if (filters.length > 0) {
var rows = $("#shelulerData").find("tr").hide();
filters.forEach(filter => {
$("#shelulerData td"+filter).parent().show();
})
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="option1">
<option></option>
<option>Thulasiram.S</option>
<option>ST Ram</option>
<option>Ram Kumar.S</option>
<option>Dinesh Kumar.S </option>
</select>
<select id="option2">
<option></option>
<option>11</option>
<option>21</option>
<option>30</option>
</select>
<select id="option3">
<option></option>
<option>Chess</option>
<option>Cricket</option>
</select>
<select id="option4">
<option></option>
<option>Day</option>
<option>Month</option>
<option>Week</option>
</select>
<button id="test213">Add filter</button>
<table id="ticketList">
<thead>
</thead>
<tbody id="shelulerData">
<tr>
<th>Fullname</th>
<th>Age</th>
<th>Sport</th>
<th>Class </th>
<th>Term</th>
</tr>
<tr class="filter-row" data-age="11" data-class="1" data-term="Day">
<td class="col1">Thulasiram.S30</td>
<td class="col2">11</td>
<td>Chess</td>
<td>1</td>
<td>Day</td>
</tr>
<tr class="filter-row" data-age="11" data-class="1" data-term="Month">
<td class="col1">ST Ram</td>
<td class="col2">11</td>
<td>Cricket</td>
<td>1</td>
<td>Month</td>
</tr>
<tr class="filter-row" data-age="21" data-class="2" data-term="Day">
<td class="col1">Ram Kumar.S 30</td>
<td class="col2">21</td>
<td>Chess</td>
<td>2</td>
<td>Day</td>
</tr>
<tr class="filter-row" data-age="30" data-class="3" data-term="Week">
<td class="col1">Dinesh Kumar.S</td>
<td class="col2">30</td>
<td>Chess</td>
<td>3</td>
<td>Week</td>
</tr>
</tbody>
</table>

Filtering html table using jQuery

I have an HTML table like this:
<table id="tableRegister" border="1">
<tr>
<th>Fullname</th>
<th>Age</th>
<th>Sport</th>
<th>Class </th>
<th>Term</th>
</tr>
<tr class="filter-row" data-age="11" data-class="1" data-term="Day">
<td>Thulasiram.S</td>
<td>11</td>
<td>Chess</td>
<td>1</td>
<td>Day</td>
</tr>
<tr class="filter-row" data-age="11" data-class="1" data-term="Month">
<td>ST Ram</td>
<td>11</td>
<td>Cricket</td>
<td>1</td>
<td>Month</td>
</tr>
<tr class="filter-row" data-age="21" data-class="2" data-term="Day">
<td>Ram Kumar.S</td>
<td>21</td>
<td>Chess</td>
<td>2</td>
<td>Day</td>
</tr>
<tr class="filter-row" data-age="30" data-class="3" data-term="Week">
<td>Dinesh Kumar.S</td>
<td>30</td>
<td>Chess</td>
<td>3</td>
<td>Week</td>
</tr>
</table>
I want to filter it based on three columns Age Class and Term.
So the distinct values of the columns are inside three select boxes:
<select class="age" data-attribute="age" >
<option value="all">Select age</option>
<option value="11">11</option>
<option value="21">21</option>
<option value="30">30</option>
<option value="32">32</option>
</select>
<select class="class" data-attribute="class">
<option value="all">Select Class </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
When the default option is selected in all of them I want to display all.
To make it easier during the table rendering I put three attributes in each row that contains the value of each of these three fields that are filterable for the current row: data-age="", data-class="" and data-term="".
So I want to be able to filer based on these, but I'm having a problem whether the options are reselected because it happens it hide all the rows.
Can someone help me cause I'm stuck on this? Here's the [JS FIDDLE][1]
$(".age").on("change",function(){
ageVal = $(this).val();
updateTable(ageVal,'age');
});
$(".class").on("change",function(){
classVal = $(this).val();
updateTable(classVal,'class');
});
$(".term").on("change",function(){
termVal = $(this).val();
updateTable(termVal, 'term');
});
var tableRows = $('#tableRegister').find('.filter-row');
function updateTable(selectVal, attribute){
if(selectVal === 'all'){
// show all
$('.filter-row').show();
}else{
tableRows.each(function(){
var rowAttValue = $(this).attr("data-"+attribute);
if(selectVal === rowAttValue){
$(this).addClass('show');
$(this).show();
}else{
$(this).addClass('hide');
$(this).hide();
}
});
}
}

The problem is that you are relying in equality to show the row and you're not considering the other filters.
I've rewrite your code to process all the filters and hide the row when one of the filters is different from the cell value.
This code can also be optimized.
Please find my JSFiddle here
Javascript:
$('.filtert').hide();
var $tableRows = $('#tableRegister .filter-row');
$(".columnfilter").on("change", function() {
// Builds the filters for all the columns:
var filters = [];
$(".columnfilter").each(function() {
var $that = $(this);
var value = $that.val();
if (value != 'all') {
filters.push({
at: $that.data('attribute'),
val: value
});
}
});
var filtersLength = filters.length;
if (filtersLength == 0) {
$('.filtert').hide();
$tableRows.show();
} else {
$('.filtert').show();
// Apply filters:
$tableRows.each(function() {
var $that = $(this);
var showRow = true;
for (var i = 0; i < filtersLength; i++) {
var filter = filters[i];
var rowAttValue = $(this).data(filter.at);
if (rowAttValue != filter.val) {
showRow = false;
break;
}
}
$that.toggle(showRow);
});
}
});

you can use :containts to search text(). then you no need all your data-attribute anymore
$(function(){
$(".age, .class, .term").change(function(){
search();
});
function search(){
let ageVal = $('.age').val(),
classVal = $('.class').val(),
termVal = $('.term').val();
$('.filter-row').show(); //reset
if(ageVal !='all')
$('.filter-row td:nth-child(2):not(:contains('+ ageVal +'))').parent().hide();
if(classVal !='all')
$('.filter-row td:nth-child(4):not(:contains('+ classVal +'))').parent().hide();
if(termVal !='all')
$('.filter-row td:nth-child(5):not(:contains('+ termVal +'))').parent().hide();
}
});
<p class="filtert">
Filtering
</p>
<select class="age" data-attribute="age" >
<option value="all">Select age</option>
<option value="11">11</option>
<option value="21">21</option>
<option value="30">30</option>
<option value="32">32</option>
</select>
<select class="class" data-attribute="class">
<option value="all">Select Class </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="term" data-attribute="term">
<option value="all"> Select </option>
<option value="Day">Day</option>
<option value="Week">Week</option>
<option value="Month">Month</option>
</select>
<br>
<table id="tableRegister" border="1">
<tr>
<th>Fullname</th>
<th>Age</th>
<th>Sport</th>
<th>Class </th>
<th>Term</th>
</tr>
<tr class="filter-row" data-age="11" data-class="1" data-term="Day">
<td>Thulasiram.S</td>
<td>11</td>
<td>Chess</td>
<td>1</td>
<td>Day</td>
</tr>
<tr class="filter-row" data-age="11" data-class="1" data-term="Month">
<td>ST Ram</td>
<td>11</td>
<td>Cricket</td>
<td>1</td>
<td>Month</td>
</tr>
<tr class="filter-row" data-age="21" data-class="2" data-term="Day">
<td>Ram Kumar.S</td>
<td>21</td>
<td>Chess</td>
<td>2</td>
<td>Day</td>
</tr>
<tr class="filter-row" data-age="30" data-class="3" data-term="Week">
<td>Dinesh Kumar.S</td>
<td>30</td>
<td>Chess</td>
<td>3</td>
<td>Week</td>
</tr>
<tr class="filter-row " data-age="11" data-class="2" data-term="Day">
<td>Raja Ram.S</td>
<td>11</td>
<td>Football</td>
<td>2</td>
<td>Day</td>
</tr>
<tr class="filter-row " data-age="32" data-class="3" data-term="Month">
<td>Priya</td>
<td>32</td>
<td>Cricket</td>
<td>3</td>
<td>Month</td>
</tr>
</table>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function(){
$(".age, .class, .term").change(function(){
search();
});
function search(){
let ageVal = $('.age').val(),
classVal = $('.class').val(),
termVal = $('.term').val();
$('.filter-row').show(); //reset
if(ageVal !='all')
$('.filter-row td:nth-child(2):not(:contains('+ ageVal +'))').parent().hide();
if(classVal !='all')
$('.filter-row td:nth-child(4):not(:contains('+ classVal +'))').parent().hide();
if(termVal !='all')
$('.filter-row td:nth-child(5):not(:contains('+ termVal +'))').parent().hide();
}
})
</script>

Javascript Dropdown Select Get Data

JavaScript knowledge is minimal. I could not write because I did not know Javascript. I am waiting for your help in this regard.
I want to show the address with SelectBox. My html codes are as follows. When 1 city is selected, only that city will be visible. How to do it?
Example: http://www.pakmaya.com.tr/tr/iletisim-bilgileri
My codes;
<select class="form-control">
<option value="miami">Miami</option>
<option value="denver">Denver</option>
<option value="paris">Paris</option>
</select>
<div class="miami">
<table>
<tbody>
<tr>
<th scope="row">Phone</th>
<td>+11 123 45 67</td>
</tr>
<tr>
<th scope="row">Address</th>
<td>One way Streen Miami /USA</td>
</tr>
<tr>
<th scope="row">E-mail</th>
<td>e-mail#mail.com</td>
</tr>
</tbody>
</table>
<div class="miamimaps">GOGOLEMAPSCODE</div>
</div>
<div class="denver">
<table>
<tbody>
<tr>
<th scope="row">Phone</th>
<td>+11 123 45 67</td>
</tr>
<tr>
<th scope="row">Address</th>
<td>One way Streen Miami /USA</td>
</tr>
<tr>
<th scope="row">E-mail</th>
<td>e-mail#mail.com</td>
</tr>
</tbody>
</table>
<div class="denvermaps">GOGOLEMAPSCODE</div>
</div>
<div class="paris">
<table>
<tbody>
<tr>
<th scope="row">Phone</th>
<td>+11 123 45 67</td>
</tr>
<tr>
<th scope="row">Address</th>
<td>One way Streen Miami /USA</td>
</tr>
<tr>
<th scope="row">E-mail</th>
<td>e-mail#mail.com</td>
</tr>
</tbody>
</table>
<div class="parismaps">GOGOLEMAPSCODE</div>
</div>

Here is one possible solution:
HTML
<select class="form-control">
<option value="miami">Miami</option>
<option value="denver">Denver</option>
<option value="paris">Paris</option>
</select>
<div class="city miami">
<p>miami</p>
<table>
// ...
</table>
<div class="miamimaps">GOGOLEMAPSCODE</div>
</div>
<div class="city denver">
<p>denver</p>
<table>
// ...
</table>
<div class="denvermaps">GOGOLEMAPSCODE</div>
</div>
<div class="city paris">
<p>paris</p>
<table>
// ...
</table>
<div class="parismaps">GOGOLEMAPSCODE</div>
</div>
CSS
.city {
display: none;
}
.miami {
display: block;
}
JS
var select = document.getElementsByTagName('select')[0],
cities = document.getElementsByClassName('city');
select.addEventListener('change', function(e) {
var selectedCity = e.target.value,
target = document.getElementsByClassName(selectedCity)[0];
for(var i = 0; i < cities.length; i++) cities[i].style.display = 'none';
target.style.display = 'block';
}, false);
jsfiddle
Update
jQuery version
var $cities = $('.city');
$('select').on('change', function() {
var selectedCity = $(this).val(),
$target = $('.' + selectedCity);
$cities.hide();
$target.show();
});
jsfiddle (jQuery version)

You need to check through a change event listener and compare the value in your select input with the class of the container div that selected city. From there set the style to display none or block all depending:
document.querySelector('.form-control').addEventListener('change', (e) => {
const selectedOption = e.target.value
Array.from(document.querySelectorAll('.miami, .denver, .paris')).forEach(elem => {
if (elem.className !== selectedOption) {
elem.style.display = 'none';
} else {
elem.style.display = 'block';
}
});
});
<select class="form-control">
<option value="miami">Miami</option>
<option value="denver">Denver</option>
<option value="paris">Paris</option>
</select>
<div class="miami">
<table>
<tbody>
<tr>
<th scope="row">Phone</th>
<td>+11 123 45 67</td>
</tr>
<tr>
<th scope="row">Address</th>
<td>One way Streen Miami /USA</td>
</tr>
<tr>
<th scope="row">E-mail</th>
<td>e-mail#mail.com</td>
</tr>
</tbody>
</table>
<div class="miamimaps">GOGOLEMAPSCODE</div>
</div>
<div class="denver">
<table>
<tbody>
<tr>
<th scope="row">Phone</th>
<td>+11 123 45 67</td>
</tr>
<tr>
<th scope="row">Address</th>
<td>One way Streen Denver /USA</td>
</tr>
<tr>
<th scope="row">E-mail</th>
<td>e-mail#mail.com</td>
</tr>
</tbody>
</table>
<div class="denvermaps">GOGOLEMAPSCODE</div>
</div>
<div class="paris">
<table>
<tbody>
<tr>
<th scope="row">Phone</th>
<td>+11 123 45 67</td>
</tr>
<tr>
<th scope="row">Address</th>
<td>One way Streen Paris /FR</td>
</tr>
<tr>
<th scope="row">E-mail</th>
<td>e-mail#mail.com</td>
</tr>
</tbody>
</table>
<div class="parismaps">GOGOLEMAPSCODE</div>
</div>

Hide and Show a row of table based on the value of a dropdown - jquery

Now the Table is dynamic so many rows can come but drop down is static
drop down 2nd and 3rd value Apple and Orange can only come in the tables 2nd column And dropdown 4th and 5 th value "Fresh" and "Rotten" can only come in the 4th column
all the code should be in the function viewChange ()
Now when Apple is selected all the rows with 2nd column value with apple will show and so on.
selection - All will show the whole table again
How do I write the function?
function ViewChange()
{
var selectedViewName = $('#dropDown :selected').val();
switch (selectedViewName)
{
case("1"):
selectedViewName="ALL";
break;
case("2"):
selectedViewName = "Apple";
break;
case("3"):
selectedViewName = "Orange";
break;
case("4"):
selectedViewName = "Fresh";
break
case("5"):
selectedViewName = "Rotten";
break
}
<select id="dropDown" onchange="ViewChange()"><option value="1">All</option>
<option value="2">Apple</option>
<option value="3">Orange</option>
<option value="4">Fresh</option>
<option value="5">Rotten</option>
</select>
<table id="tableID">
<thead>
<tr>
<th>Name</th>
<th>Fruit type</th>
<th>place</th>
<th>state</th>
</tr>
</thead>
<tbody>
<tr>
<td>salim groceries</td>
<td>apple</td>
<td>nagpur</td>
<td>fresh</td>
</tr>
<tr>
<td>monalisa groceries</td>
<td>Apple</td>
<td>Belapur</td>
<td>Rotten</td>
</tr>
<tr>
<td>taj groceries</td>
<td>Orange</td>
<td>Nasik</td>
<td>Fresh</td>
</tr>
<tr>
<td>suraj groceries</td>
<td>Orange</td>
<td>Goa</td>
<td>Rotten</td>
</tr>
</tbody>
</table>
Please check out this fiddle https://jsfiddle.net/shaswatatripathy/pvxmrL2n/8/

Try the following
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
return function( elem ) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
function ViewChange($this) {
var pid = $('option:selected', $this).text();
$('#tableID tr').hide();
$('#tableID tr > td:contains(' + pid + ')').each(function () {
$(this).parent().toggle();
});
if(pid == "All") {
$('#tableID tr').show();
} else {
$('#tableID tr:first').show();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropDown" onchange="ViewChange(this)"><option value="1">All</option>
<option value="2">Apple</option>
<option value="3">Orange</option>
<option value="4">Fresh</option>
<option value="5">Rotten</option>
</select>
<table id="tableID">
<thead>
<tr>
<th>Name</th>
<th>Fruit type</th>
<th>place</th>
<th>state</th>
</tr>
</thead>
<tbody>
<tr >
<td>salim groceries</td>
<td>apple</td>
<td>nagpur</td>
<td>Fresh</td>
</tr>
<tr >
<td>monalisa groceries</td>
<td>Apple</td>
<td>Belapur</td>
<td>Rotten</td>
</tr>
<tr >
<td>taj groceries</td>
<td>Orange</td>
<td>Nasik</td>
<td>Fresh</td>
</tr>
<tr >
<td>suraj groceries</td>
<td>Orange</td>
<td>Goa</td>
<td>Rotten</td>
</tr>
</tbody>
</table>
Here is the working jsfiddle: https://jsfiddle.net/pvxmrL2n/10/

As you asked, I am adding one more solution where there is no changes in your HTML.
Solution 1 : Without changes in HTML
document.getElementById("dropDown").addEventListener("change", viewChange)
function viewChange()
{
var value = $('#dropDown :selected').text();
if(value=="All"){
$("#tableID tbody tr").removeClass("hiddenItem");
} else {
$("#tableID tbody tr").addClass("hiddenItem");
$("#tableID tbody tr td").each(function (key, tdElem) {
if(tdElem.innerHTML.toLocaleUpperCase() == value.toLocaleUpperCase()){
$(tdElem.parentElement).removeClass("hiddenItem");
}
});
}
}
.hiddenItem {
display : none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropDown"><option value="1">All</option>
<option value="2">Apple</option>
<option value="3">Orange</option>
<option value="4">Fresh</option>
<option value="5">Rotten</option>
</select>
<table id="tableID">
<thead>
<tr>
<th>Name</th>
<th>Fruit type</th>
<th>place</th>
<th>state</th>
</tr>
</thead>
<tbody>
<tr >
<td>salim groceries</td>
<td>apple</td>
<td>nagpur</td>
<td>Fresh</td>
</tr>
<tr >
<td>monalisa groceries</td>
<td>Apple</td>
<td>Belapur</td>
<td>Rotten</td>
</tr>
<tr >
<td>taj groceries</td>
<td>Orange</td>
<td>Nasik</td>
<td>Fresh</td>
</tr>
<tr >
<td>suraj groceries</td>
<td>Orange</td>
<td>Goa</td>
<td>Rotten</td>
</tr>
</tbody>
</table>
Solution 2 : With changes in HTML
Try this, It works
document.getElementById("dropDown").addEventListener("change", viewChange)
function viewChange()
{
var value = this.value;
if(value=="All"){
$("#tableID tbody tr").removeClass("hiddenItem");
} else {
$("#tableID tbody tr").addClass("hiddenItem");
$("#tableID tbody ." + value).removeClass("hiddenItem");
}
}
.hiddenItem {
display : none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropDown" ><option value="All">All</option>
<option value="Apple">Apple</option>
<option value="Orange">Orange</option>
<option value="Fresh">Fresh</option>
<option value="Rotten">Rotten</option>
</select>
<table id="tableID">
<thead>
<tr>
<th>Name</th>
<th>Fruit type</th>
<th>place</th>
<th>state</th>
</tr>
</thead>
<tbody>
<tr class="Apple Nagpur Fresh">
<td>salim groceries</td>
<td>Apple</td>
<td>Nagpur</td>
<td>Fresh</td>
</tr>
<tr class="Apple Belapur Rotten" >
<td>monalisa groceries</td>
<td>Apple</td>
<td>Belapur</td>
<td>Rotten</td>
</tr>
<tr class="Orange Nasik Fresh" >
<td>taj groceries</td>
<td>Orange</td>
<td>Nasik</td>
<td>Fresh</td>
</tr>
<tr class="Orange Goa Rotten" >
<td>suraj groceries</td>
<td>Orange</td>
<td>Goa</td>
<td>Rotten</td>
</tr>
</tbody>
</table>

function ViewChange($this) {
var $selectText = $('option:selected', $this).text().toLowerCase();
var $val = $($this).val();
if ($selectText != 'all') {
$('tr').each(function () {
if ($(this).find('td').length) {
var txt = '';
if ($val < 4)
txt = $(this).find('td:eq(1)').text().toLowerCase();
else
txt = $(this).find('td:eq(3)').text().toLowerCase();
if (txt === $selectText) {
$(this).show();
}
else {
$(this).hide();
}
}
})
}
else {
$('tr').show();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropDown" onchange="ViewChange(this)"><option value="1">All</option>
<option value="2">Apple</option>
<option value="3">Orange</option>
<option value="4">Fresh</option>
<option value="5">Rotten</option>
</select>
<table id="tableID">
<thead>
<tr>
<th>Name</th>
<th>Fruit type</th>
<th>place</th>
<th>state</th>
</tr>
</thead>
<tbody>
<tr >
<td>salim groceries</td>
<td>apple</td>
<td>nagpur</td>
<td>Fresh</td>
</tr>
<tr >
<td>monalisa groceries</td>
<td>Apple</td>
<td>Belapur</td>
<td>Rotten</td>
</tr>
<tr >
<td>taj groceries</td>
<td>Orange</td>
<td>Nasik</td>
<td>Fresh</td>
</tr>
<tr >
<td>suraj groceries</td>
<td>Orange</td>
<td>Goa</td>
<td>Rotten</td>
</tr>
</tbody>
</table>

You can go trough this file and check the functionality which can auto check every text
https://jsfiddle.net/pvxmrL2n/23/
https://jsfiddle.net/pvxmrL2n/23/
https://jsfiddle.net/pvxmrL2n/23/
function ViewChange(miljo)
{
var res = miljo.toLowerCase();
var rows = document.getElementsByTagName("table")[0].rows;
var count=0;
for(count = 0; count < rows.length; count++)
{
var j=0;
if(rows[count].className=='allrecords'){
if(res=='all')
{
rows[count].style.display = '';
}else{
rows[count].style.display = 'none';
for ( j = 0; j < rows[count].cells.length; j++) {
var contentval=rows[count].cells[j].innerText;
contentvallwr=contentval.toLowerCase();
if(res==contentvallwr)
{
rows[count].style.display = '';
break;
}
}
}
}
}
}
<select id="dropDown" onchange="ViewChange(this.options[this.selectedIndex].innerHTML)">
<option value="1">All</option>
<option value="2">Apple</option>
<option value="3">Orange</option>
<option value="4">Fresh</option>
<option value="5">Rotten</option>
</select>
<table id="tableID">
<thead>
<tr class="head">
<th>Name</th>
<th>Fruit type</th>
<th>place</th>
<th>state</th>
</tr>
</thead>
<tbody>
<tr class="allrecords" >
<td>salim groceries</td>
<td>apple</td>
<td>nagpur</td>
<td>Fresh</td>
</tr>
<tr class="allrecords">
<td>monalisa groceries</td>
<td>Apple</td>
<td>Belapur</td>
<td>Rotten</td>
</tr>
<tr class="allrecords">
<td>taj groceries</td>
<td>Orange</td>
<td>Nasik</td>
<td>Fresh</td>
</tr>
<tr class="allrecords">
<td >suraj groceries</td>
<td>Orange</td>
<td>Goa</td>
<td>Rotten</td>
</tr>
</tbody>
</table>

Pre-populating the select dropdown with the selected table row

I have a table structure like this
Fruit Price Qty
Apple 30 10
Orange 20 20
Grapes 12 10
pineapple 10 5
Now when I select any row from this table, I want to pre-set the corresponding value in select dropdown.
For e.g if I select Apple from the table, I need to pre-set the corresponding values of the selected row from table in select statement i.e Fruit = Apple, Price = 30 and Qty = 10 in my corresponding select statement.
How can I do that?

DEMO HERE
Assuming your html to be as below:
<table class="fruits">
<thead>
<th>Fruit</th>
<th>Price</th>
<th>Qty</th>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>30</td>
<td>10</td>
</tr>
<tr>
<td>Orange</td>
<td>20</td>
<td>20</td>
</tr>
<tr>
<td>Grapes</td>
<td>12</td>
<td>10</td>
</tr>
<tr>
<td>Pineapple</td>
<td>10</td>
<td>5</td>
</tr>
</tbody>
</table>
JS
$('.fruits tr').on('click',function(){
var fruit = $(this).find('td:first-child').text().trim();
var price=$(this).find('td:nth-child(2)').text().trim();
var qty=$(this).find('td:last-child').text().trim();
alert("Fruit =" + fruit+", Price =" + price +", Qty = "+qty);
//Can use those values and pass as parameter to your select statement
});

Try this
$(function() {
$('tr').click(function() {
var sid = 0;
$(this).find('td').each(function() {
sid++;
$('#s' + sid).val($(this).text());
});
});
});
table {
border-collapse: collapse;
}
tr,
td {
border: 1px solid grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>Fruit</td>
<td>Price</td>
<td>Qty</td>
</tr>
<tr>
<td>Apple</td>
<td>30</td>
<td>10</td>
</tr>
<tr>
<td>Orange</td>
<td>20</td>
<td>20</td>
</tr>
<tr>
<td>Grapes</td>
<td>12</td>
<td>10</td>
</tr>
<tr>
<td>Pineapple</td>
<td>10</td>
<td>5</td>
</tr>
</table>
<br/>Fruit:
<select id="s1">
<option>--Select--</option>
<option>Apple</option>
<option>Orange</option>
<option>Grapes</option>
<option>Pineapple</option>
</select>
<br/>Price:
<select id="s2">
<option>--Select--</option>
<option>30</option>
<option>20</option>
<option>12</option>
<option>10</option>
</select>
<br/>Qty:
<select id="s3">
<option>--Select--</option>
<option>10</option>
<option>20</option>
<option>10</option>
<option>5</option>
</select>

Develop Reference

JavaScript is the programming language of the Web.

multiple select filter in javasvript - javascript

Related

How to filter data from options for special column jQuery

Filtering html table using jQuery

Javascript Dropdown Select Get Data

Hide and Show a row of table based on the value of a dropdown - jquery

Pre-populating the select dropdown with the selected table row

Categories

Resources