Depending on the value selected with the 3 selectors I only have to display the rows that contain those values selected earlier at the same time.
I currently have this and it works for one selector. How can I extend it for all the 3 selectors to affect the rows displayed?
<select id="selA">
<option value="0">Toate</option>
<option value="a1">A1</option>
<option value="a2">A2</option>
<option value="a3">A3</option>
</select>
<select id="selB">
<option value="0">Toate</option>
<option value="b1">B1</option>
<option value="b2">B2</option>
<option value="b3">B3</option>
<option value="b4">B4</option>
<option value="b5">B5</option>
<option value="b6">B6</option>
</select>
<select id="selC">
<option value="0">Toate</option>
<option value="c1">C1</option>
<option value="c2">C2</option>
<option value="c3">C3</option>
<option value="c4">C4</option>
<option value="c5">C5</option>
<option value="c6">C6</option>
<option value="c7">C7</option>
<option value="c8">C8</option>
<option value="c9">C9</option>
<option value="c10">C10</option>
</select>
</div>
<table class="table table-bordered" id="table">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td class="choice one">A1</td>
<td class="choice one">B1</td>
<td class="choice one">C1</td>
</tr>
<tr>
<td class="choice one">A1</td>
<td class="choice one">B1</td>
<td class="choice one">C2</td>
</tr>
<tr>
<td class="choice one">A1</td>
<td class="choice one">B1</td>
<td class="choice one">C3</td>
</tr>
<tr>
<td class="choice one">A1</td>
<td class="choice one">B2</td>
<td class="choice one">C4</td>
</tr>
</tbody>
</table>
AND JS:
$(document).ready(function(){
$("#selA").change(function(){
var textselected = document.getElementById("selA").value ;
target = '.' + textselected;
$('.choice').hide();
$(target).show();
});
});
How can I make it so it doesn't depend on the class and hides the rows that don't have ALL the values in the selectors?
K, I think you want something like this:
https://jsfiddle.net/agkh7f3w/2/
HTML:
<div id="filtru">filtru:
<select id="selA">
<option value="">Toate</option>
<option value="a1">A1</option>
<option value="a2">A2</option>
<option value="a3">A3</option>
</select>
<select id="selB">
<option value="">Toate</option>
<option value="b1">B1</option>
<option value="b2">B2</option>
<option value="b3">B3</option>
<option value="b4">B4</option>
<option value="b5">B5</option>
<option value="b6">B6</option>
</select>
<select id="selC">
<option value="">Toate</option>
<option value="c1">C1</option>
<option value="c2">C2</option>
<option value="c3">C3</option>
<option value="c4">C4</option>
<option value="c5">C5</option>
<option value="c6">C6</option>
<option value="c7">C7</option>
<option value="c8">C8</option>
<option value="c9">C9</option>
<option value="c10">C10</option>
</select>
</div>
<table class="table table-bordered" id="table">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr>
<td>A1</td>
<td>B1</td>
<td>C2</td>
</tr>
<tr>
<td>A1</td>
<td>B1</td>
<td>C3</td>
</tr>
<tr>
<td>A1</td>
<td>B2</td>
<td>C4</td>
</tr>
</tbody>
</table>
JS:
$(document).ready(function() {
$('#filtru select').change(function() {
const filtru = [$('#selA').val(), $('#selB').val(), $('#selC').val()];
$('#table tr').each(function() {
$(this).show();
$('td', this).each(function(i) {
const text = $(this).text().toLowerCase();
if (text.indexOf(filtru[i]) === -1) {
$(this).closest('tr').hide();
}
})
})
});
});
Related
Here's what I am trying to do: If I select something from the dropdown list "selectOption1", I want to set an option in the other dropdown list "selectOption2" to "invisible". Unfortunately, I cannot address the element correctly in the other list.
multiCapture.html
function setAnrede() {
var ddl = document.getElementById("selectOption1");
var selectedValue1 = ddl.options[ddl.selectedIndex].value;
var ddl = document.getElementById("selectOption2");
var selectedValue2 = ddl.options[ddl.selectedIndex].value;
if (selectedValue1 == 'Männlich') {
selectedValue2.options[2].style.display = "none";
}
}
<form>
<div class="table-wrapper">
<div class="table-scroll">
<table id="myTable">
<tr>
<th>Geschlecht</th>
<th>Anrede</th>
<th>Titel</th>
<th>Vorname</th>
<th>Nachname</th>
<th>E-Mail</th>
</tr>
<tr>
<td>
<div class="input-field">
<select id="selectOption1" required onchange="setAnrede()">
<option value="Bitte auswählen" selected>Bitte auswählen</option>
<option value="Männlich">Männlich</option>
<option value="Weiblich">Weiblich</option>
</select>
<label>Geschlecht angeben:</label>
</div>
</td>
<td>
<div class="input-field">
<select id="selectOption2" required>
<option value="Bitte auswählen" selected>Bitte auswählen</option>
<option value="Sehr geehrter">Sehr geehrter</option>
<option value="Lieber">Lieber</option>
<option value="Werter">Werter</option>
<option value="Hallo">Hallo</option>
</select>
<label>Anrede angeben:</label>
</div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
</form>
You could attach the change event in your JS code instead, then use eq() to select the option you want based on the index, like:
jQuery solution :
$('#selectOption1').on('change', setAnrede);
function setAnrede() {
var ddl = $("#selectOption1");
var dd2 = $("#selectOption2");
if ($(this).val() === 'Männlich') {
dd2.find('option:eq(2)').hide();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="table-wrapper">
<div class="table-scroll">
<table id="myTable" border=1>
<tr>
<th>Geschlecht</th>
<th>Anrede</th>
<th>Titel</th>
<th>Vorname</th>
<th>Nachname</th>
<th>E-Mail</th>
</tr>
<tr>
<td>
<div class="input-field">
<select id="selectOption1" required>
<option value="Bitte auswählen" selected>Bitte auswählen</option>
<option value="Männlich">Männlich</option>
<option value="Weiblich">Weiblich</option>
</select>
<label>Geschlecht angeben:</label>
</div>
</td>
<td>
<div class="input-field">
<select id="selectOption2" required>
<option value="Bitte auswählen" selected>Bitte auswählen</option>
<option value="Sehr geehrter">Sehr geehrter</option>
<option value="Lieber">Lieber</option>
<option value="Werter">Werter</option>
<option value="Hallo">Hallo</option>
</select>
<label>Anrede angeben:</label>
</div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
</form>
Pure Js solution
document.getElementById("selectOption1").addEventListener("click", setAnrede);
function setAnrede() {
var ddl = document.getElementById("selectOption1");
var dd2 = document.getElementById("selectOption2");
var selectedValue1 = ddl.options[ddl.selectedIndex].value;
if (selectedValue1 == 'Männlich') {
dd2.options[2].style.display = "none";
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="table-wrapper">
<div class="table-scroll">
<table id="myTable" border=1>
<tr>
<th>Geschlecht</th>
<th>Anrede</th>
<th>Titel</th>
<th>Vorname</th>
<th>Nachname</th>
<th>E-Mail</th>
</tr>
<tr>
<td>
<div class="input-field">
<select id="selectOption1" required>
<option value="Bitte auswählen" selected>Bitte auswählen</option>
<option value="Männlich">Männlich</option>
<option value="Weiblich">Weiblich</option>
</select>
<label>Geschlecht angeben:</label>
</div>
</td>
<td>
<div class="input-field">
<select id="selectOption2" required>
<option value="Bitte auswählen" selected>Bitte auswählen</option>
<option value="Sehr geehrter">Sehr geehrter</option>
<option value="Lieber">Lieber</option>
<option value="Werter">Werter</option>
<option value="Hallo">Hallo</option>
</select>
<label>Anrede angeben:</label>
</div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
</form>
You need to change your javascript code
<script type="application/x-javascript">
function setAnrede() {
var ddl = document.getElementById("selectOption1");
var selectedValue1 = ddl.options[ddl.selectedIndex].value;
var ddl2 = document.getElementById("selectOption2");
var selectedValue2 = ddl.options[ddl.selectedIndex].value;
if (selectedValue1 == 'Männlich') {
ddl2.options[2].style.display = "none";
}
}
</script>
I have this table in html and what I am trying to do is that when I give the button assign with jquery it brings me the values of the select and the model
<button type="button" class="assign" id="assign">assign</button>
<table id="example-table" class="table table-striped table-hover table-condensed">
<tr>
<th>Make</th>
<th>Model</th>
<th>Color</th>
<th>SELECT</th>
</tr>
<tbody>
<tr>
<td>Ford</td>
<td>Escort</td>
<td>Blue</td>
<td id="ISINcb" class="lblCell_R" align="center">
<select>
<option id="ISIN1">A Abel</option>
<option id="ISIN2">B Babel</option>
<option id="ISIN3">C Cable</option>
<option id="ISIN4">E Enable</option>
</select>
</td>
</tr>
<tr>
<td>Ford</td>
<td>Ranger</td>
<td>Blue</td>
<td id="ISINcb" class="lblCell_R" align="center">
<select>
<option id="ISIN1">A Abel</option>
<option id="ISIN2">B Babel</option>
<option id="ISIN3">C Cable</option>
<option id="ISIN4">E Enable</option>
</select>
</td>
</tr>
<tr>
<td>Toyota</td>
<td>Tacoma</td>
<td>Red</td>
<td id="ISINcb" class="lblCell_R" align="center">
<select>
<option id="ISIN1">A Abel</option>
<option id="ISIN2">B Babel</option>
<option id="ISIN3">C Cable</option>
<option id="ISIN4">E Enable</option>
</select>
</td>
</tr>
<tr>
<td>Ford</td>
<td>Mustang</td>
<td>Silver</td>
<td id="ISINcb" class="lblCell_R" align="center">
<select>
<option id="ISIN1">A Abel</option>
<option id="ISIN2">B Babel</option>
<option id="ISIN3">C Cable</option>
<option id="ISIN4">E Enable</option>
</select>
</td>
</tr>
<tr>
<td>Mercury</td>
<td>Sable</td>
<td>Silver</td>
<td id="ISINcb" class="lblCell_R" align="center">
<select>
<option id="ISIN1">A Abel</option>
<option id="ISIN2">B Babel</option>
<option id="ISIN3">C Cable</option>
<option id="ISIN4">E Enable</option>
</select>
</td>
</tr>
<tr>
<td>Toyota</td>
<td>Corolla</td>
<td>Blue</td>
<td id="ISINcb" class="lblCell_R" align="center">
<select>
<option id="ISIN1">A Abel</option>
<option id="ISIN2">B Babel</option>
<option id="ISIN3">C Cable</option>
<option id="ISIN4">E Enable</option>
</select>
</td>
</tr>
</tbody>
</table>
jquery
$(function() {
$('.assign').click(function(e) {
var select = Here the value of select
var model = Here is the model value
console.log(select );
console.log(model );
});
});
And additional put me the select disabled
Here an idea how you can do it. Iterating each one of rows and get the model of your row and get the selected item, something like this:
$('#assign').on('click', function(e){
$('tbody tr').each(function(){
console.log($(this).children().find("select").find(":selected").text());
console.log($(this).children()[1].textContent);
})
});
An advice ID's must be uniques, so you should change that in each one of your selects.
I have the below html and jquery:
var result = {
"TPS on Desktop": "Green",
'TPS on mobile': 'Amber'
};
for (var key in result) {
$('td[id="checklist"]').each(function() {
if (JSON.stringify($(this).text().trim() === key)) {
$(this).closest('tr').find('td[class="tdcolor"] select option:selected').val(result[key]);
console.log(key + ' : ' + $(this).closest('tr').find('td[class="tdcolor"] select option:selected').val());
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="decisionTable" class="CSSTableGenerator" width="100%" border=1 id="table1">
<tr color="23145">
<th><b>CheckList</b></th>
<th><b>Health</b></th>
</tr>
<tr>
<td id="checklist">
TPS on Desktop
</td>
<td class="tdcolor">
<select class="health">
<option value=0>Select</option>
<option value="1">Green</option>
<option value="2">Amber</option>
<option value="3">Red</option>
</select>
</td>
</tr>
<tr>
<td id="checklist">
TPS on Mobile
</td>
<td class="tdcolor">
<select class="health">
<option value=0>Select</option>
<option value="1">Green</option>
<option value="2">Amber</option>
<option value="3">Red</option>
</select>
</td>
</tr>
</table>
Using the above jquery, I want to change the value of the dropdown in tdcolor td element and the same should reflect on the web page. But, I've not had luck with above code, however console.log output of the selected value says the new value is updated but the same isn't reflected.
Could you please help me in solving this issue? I want to change the color of tdcolor based on the colors passed in result map.
Many Thanks in advance.
Don't use duplicate ids, id value should be unique. Use another attribute like data-id instead.
Also, no need to use nested iterations
var result = {
"TPS on Desktop": "Green",
'TPS on Mobile': 'Amber'
};
$('td[data-id="checklist"]').each(function()
{
var value = result[ $(this).html().trim() ];
$(this).closest('tr').find('td[class="tdcolor"] select option:contains(' + value + ')').prop("selected", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="decisionTable" class="CSSTableGenerator" width="100%" border=1 id="table1">
<tr color="23145">
<th><b>CheckList</b></th>
<th><b>Health</b></th>
</tr>
<tr>
<td data-id="checklist">
TPS on Desktop
</td>
<td class="tdcolor">
<select class="health">
<option value=0>Select</option>
<option value="1">Green</option>
<option value="2">Amber</option>
<option value="3">Red</option>
</select>
</td>
</tr>
<tr>
<td data-id="checklist">
TPS on Mobile
</td>
<td class="tdcolor">
<select class="health">
<option value=0>Select</option>
<option value="1">Green</option>
<option value="2">Amber</option>
<option value="3">Red</option>
</select>
</td>
</tr>
</table>
$('select').change(function(){
var value = $(this).find("option:selected").text();
var txtVal = $(this).parent().parent().find('#checklist').text();
console.log(txtVal.trim()+':'+value.trim());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="decisionTable" class="CSSTableGenerator" width="100%" border=1 id="table1">
<tr color="23145">
<th><b>CheckList</b></th>
<th><b>Health</b></th>
</tr>
<tr>
<td id="checklist">
TPS on Desktop
</td>
<td class="tdcolor">
<select class="health">
<option value=0>Select</option>
<option value="1">Green</option>
<option value="2">Amber</option>
<option value="3">Red</option>
</select>
</td>
</tr>
<tr>
<td id="checklist">
TPS on Mobile
</td>
<td class="tdcolor">
<select class="health">
<option value=0>Select</option>
<option value="1">Green</option>
<option value="2">Amber</option>
<option value="3">Red</option>
</select>
</td>
</tr>
</table>
this is my code .
if i select tamilnadu , i must get chennai.
if i select kerla i must get kochi.
how to get the values if i submit.
enter code here
<td align='center' >STATE:</td>
<td> <select name ='state' onchange="showData()">
<option value="0">Select</option>
<option value="TAMILNADU">TAMILNADU</option>
<option value="KERLA">KERLA</option>
<option value="KARNATAKA">KARNATAKA</option>
</td>
</tr>
<tr> <td> </td> </tr>
<tr>
<td align='center' name ='city'>city:</td>
<td> <select>
<option id='chennai'>chennai</option>
<option id='kochi'>kochi</option>
<option id='banglore'>banglore<option>
</tr>
You can go with the correct tag formation like this:
jQuery
$('#state').change(function() {
$('#res').html($('#city option').eq($('#state option:selected').index()).val())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<tr>
<td align='center'>STATE:</td>
<td>
<select name='state' id='state'>
<option value="TAMILNADU">TAMILNADU</option>
<option value="KERLA">KERLA</option>
<option value="KARNATAKA">KARNATAKA</option>
</select>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td align='center' name='city'>city:</td>
<td>
<select name='city' id='city'>
<option id='chennai'>chennai</option>
<option id='kochi'>kochi</option>
<option id='banglore'>banglore
<option>
</select>
</tr>
<br>
<br>RESULT : <span id='res'></span>
Javascript:
function listResult() {
var e = document.getElementById("state");
document.getElementById("res").innerHTML = document.getElementById("city").options[e.selectedIndex].value
}
<tr>
<td align='center'>STATE:</td>
<td>
<select name='state' id='state' onchange='listResult()'>
<option value="TAMILNADU">TAMILNADU</option>
<option value="KERLA">KERLA</option>
<option value="KARNATAKA">KARNATAKA</option>
</select>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td align='center' name='city'>city:</td>
<td>
<select name='city' id='city'>
<option id='chennai'>chennai</option>
<option id='kochi'>kochi</option>
<option id='banglore'>banglore
<option>
</select>
</tr>
<br>
<br>RESULT : <span id='res'></span>
Below I have a simple table that I am trying to loop through and get the value of each cell in each row if it has <td>s.
But I get an error saying find does not exist, and yes jquery is added. Can you please help. Thanks
$(document).ready(function () {
var x = $('table tr:has(td)');
$.each(x, function (i, v) {
alert(
v.find('td').eq(0).text()); + " ----" + v.find('td').eq(1).find('option:selected').val(););
});
});
<table>
<tbody>
<tr>
<th>a</th>
<th>b</th>
</tr>
<tr>
<td>test</td>
<td>
<select>
<option value="yes">yes</option>
<option selected="selected" value="no">no</option>
</select>
</td>
</tr>
<tr>
<td>test</td>
<td>
<select>
<option value="yes">yes</option>
<option selected="selected" value="no">no</option>
</select>
</td>
</tr>
<tr>
<td>test</td>
<td>
<select>
<option value="yes">yes</option>
<option selected="selected" value="no">no</option>
</select>
</td>
</tr>
<tr>
<td>test</td>
<td>
<select>
<option value="yes">yes</option>
<option selected="selected" value="no">no</option>
</select>
</td>
</tr>
<tr>
<td>test</td>
<td>
<select>
<option value="yes">yes</option>
<option selected="selected" value="no">no</option>
</select>
</td>
</tr>
</tbody>
</table>
v is the element on the DOM, so you need to wrap it into the $ function in order to chain another jQuery method : $(v).find(...)
note: you could also write $(this).find(...)
$(document).ready(function () {
$('table tr:has(td)').each(function (tr) {
$('td', tr).each(function (td) {
alert($(td).text());
});
});
});