Bring selected item values

Bring selected item values - javascript

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.

Related

Changing table rows depending on 3 selectors

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();
}
})
})
});
});

changing the selected value of element using jquery

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>

how to select values in the dropdown box

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>

how to get value in textboxes selecting dropdown list value?

hi i want to display value in textbox selected by dropdown value. suppose i selected sql
i got the value like jdbc:mysql://localhost/lportal?useUnicode=true&characterEncoding=UTF-8&useFastDateParsing=falsein jdbc url textbox.com.mysql.jdbc.Driver driver name in driver class textbox.
this type of code i want
<form>
<table>
<tr>
<td>Database Type</td>
</tr>
<tr>
<td><select name="Database Type" onclick="fillData()" id="sel_value">
<option value="DB2">DB2</option>
<option value="Derby">Derby</option>
<option value="Hypersonic">Hypersonic</option>
<option value="Ingres">Ingres</option>
<option value="MySQL">MySQL</option>
<option value="Oracle">Oracle</option>
<option value="P6Spy">P6Spy</option>
<option value="PostgreSQL">PostgreSQL</option>
<option value="SQL Server">SQL Server</option>
<option value="Sybase">Sybase</option>
</select>
</tr>
<tr>
<td>JDBC URL(required)</td>
</tr>
<tr>
<td><input type="text" name="jdbcUrl" style="width: 550px;" id="jdbcUrl"></td>
</tr>
<tr>
<td>JDBC Driver Class Name(Required)</td>
</tr>
<tr>
<td><input type="text" name="text" style="width: 550px;"></td>
</tr>
<tr>
<td>username</td>
</tr>
<tr>
<td><input type="text" name="text" style="width: 550px;"></td>
</tr>
<tr>
<td>password</td>
</tr>
<tr>
<td><input type="password" name="text" style="width: 550px;"></td>
</tr>
</table>
</form>

Replace the onclick with onchange. Here try this code:
<select name="Database Type" onchange="fillData()" id="sel_value">
<option value="DB2">DB2</option>
<option value="Derby">Derby</option>
<option value="Hypersonic">Hypersonic</option>
<option value="Ingres">Ingres</option>
<option value="MySQL">MySQL</option>
<option value="Oracle">Oracle</option>
<option value="P6Spy">P6Spy</option>
<option value="PostgreSQL">PostgreSQL</option>
<option value="SQL Server">SQL Server</option>
<option value="Sybase">Sybase</option>
</select>
Javascript:
function fillData(){
alert($('#sel_value').val());
}

loop through table row and get each value in row - find error?

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());
});
});
});

Develop Reference

JavaScript is the programming language of the Web.

Bring selected item values - javascript

Related

Changing table rows depending on 3 selectors

changing the selected value of element using jquery

how to select values in the dropdown box

how to get value in textboxes selecting dropdown list value?

loop through table row and get each value in row - find error?

Categories

Resources