I need to get the selected value from the select inside a big table only knowing the exact text of the th element before it. In the extract below, i need to get One, knowing only check. Any ideas?
<table>
....
<tr>
<th class="width2">check</th>
<td>
<select>
<option value="">- Select -</option>
<option value="1" selected="">One</option>
<option value="2">two</option>
</select>
</td>
...
</tr>
...
</table>
You can use :contains() selector but it select unwanted element in some cases. So use .filter() to filtering th has special text.
var t = $("th").filter(function(){
return $(this).text() == 'check';
}).next().find("select :selected").text();
console.log(t);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th class="width2">check</th>
<td>
<select>
<option value="">- Select -</option>
<option value="1" selected="">One</option>
<option value="2">two</option>
</select>
</td>
</tr>
</table>
Related
Say I've got a table and I would like to change every select with it's options.
So for example if the table has this :
<td>
<select>
<option>first option</option>
<option selected>second option</option>
<option>third option</option>
</select>
</td>
It should become this :
<td>
second option
</td>
Here's what I've tried :
$('#table select').find(":selected").each(function() {
this.replaceWith(this.text());
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<html>
<body>
<table id="table">
<thead>
<th>test</th>
</thead>
<tbody>
<tr>
<td>
<select>
<option>first option</option>
<option selected>second option</option>
<option>third option</option>
</select>
</td>
</tr>
<tr>
<td>
<select>
<option>first option</option>
<option>second option</option>
<option selected>third option</option>
</select>
</td>
</tr>
</tbody>
</table>
</body>
</html>
But I get a this.text is not a function, how can I point out to the text of the select items? I'm lost.
You figured out that the this keyword refers to the element selected. But text is a jQuery function and not present as a method on this.
To be able to use this and jQuery you need to wrap it into $(this)
. Use parents to select the TD and then change with text.
This should get the desired result as provided by your example.
$('#table select').find(":selected").each(function() {
$(this).parents("td").text($(this).text());
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<table id="table">
<thead>
<th>test</th>
</thead>
<tbody>
<tr>
<td>
<select>
<option>first option</option>
<option selected>second option</option>
<option>third option</option>
</select>
</td>
</tr>
<tr>
<td>
<select>
<option>first option</option>
<option>second option</option>
<option selected>third option</option>
</select>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Vanilla solution (without jQuery)
//Vanilla solution
//Array.from: casts a node list (array like) to actual Array; supported by all major browsers except IE
//querySelector is used to select the elements. Then loop with array's forEach
Array.from(document.querySelectorAll("#table select > option:checked")).forEach(function(element) {
//element refers to the selected element
//go up two elements to the TD and save to parent
var parent = element.parentElement.parentElement;
//use replaceChild and createTextNode
//createTextNode creates a node from the string provided.
var textNode = document.createTextNode(element.textContent);
//replace from the parent
parent.replaceChild(textNode, parent.querySelector("select"));
});
<html>
<body>
<table id="table">
<thead>
<th>test</th>
</thead>
<tbody>
<tr>
<td>
<select>
<option>first option</option>
<option selected>second option</option>
<option>third option</option>
</select>
</td>
</tr>
<tr>
<td>
<select>
<option>first option</option>
<option>second option</option>
<option selected>third option</option>
</select>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I need show selection id by js, by this code only show 1 and first select id
my code is this html and javascript
<tr>
<td>
<select name="jens_id[]" id="jens_id" required="" >
<option ></option>
<option >1</option>
<option >2</option>
</select>
</td>
</tr>
<tr>
<td>
<select name="jens_id[]" id="jens_id" required="" >
<option ></option>
<option >1</option>
<option >2</option>
</select>
</td>
</tr>
<script>
$(document).ready(function(){
$('#jens_id').change(function(){
statteId = $("#jens_id").val()
alert(statteId);
});
});
</script>
can help for edit script
The id attribute should be unique within the page otherwise only the first one gets selected(using id selector), for a group of elements use a common class instead and within the change event handler use this to refer the clicked element.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<select name="jens_id[]" class="jens_id" required="">
<option ></option>
<option >1</option>
<option >2</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>
<select name="jens_id[]" class="jens_id" required="">
<option ></option>
<option >1</option>
<option >2</option>
</select>
</td>
<td></td>
</tr>
</table>
<script>
$(document).ready(function() {
// or use attribute equals selector
// $('[name="jens_id[]"]')
$('.jens_id').change(function() {
statteId = $(this).val(); // or this.value
console.log(statteId);
// get the td and update with value
$(this).parent().next().text(statteId);
});
});
</script>
Try with each() function of jquery .And change the selector with Tagname or ClassName instead of id .Id is a unique for full document
$(document).ready(function() {
$('select').each(function(){
console.log($(this).val())
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<select name="jens_id[]" id="jens_id" required="">
<option ></option>
<option selected>1</option>
<option >2</option>
</select>
</td>
</tr>
<tr>
<td>
<select name="jens_id[]" id="jens_id" required="">
<option ></option>
<option >1</option>
<option selected>2</option>
</select>
</td>
</tr>
$(document).ready(function() {
$('.jens_id').change(function() {
statteId = $('option:selected', this).text()
alert(statteId);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="jens_id[]" class="jens_id" required="">
<option ></option>
<option >1</option>
<option >2</option>
</select>
<select name="jens_id[]" class="jens_id" required="">
<option ></option>
<option >3</option>
<option >4</option>
</select>
ID should be unique, use class and use this context to tell the current changed select
You are already aware now that id of the element on page should be unique.
When you have multiple elements with same id then id(#) selector returns the first matched element. So as mentioned in other answers you should use class if possible.
By any reason if you can't use the class and want to find with id then you can use it like $('select#jens_id') or $('[id="jens_id"]') and to get the selected option use context to this which will find the selected option for changed select element.
$(document).ready(function() {
$('select#jens_id').change(function() {
alert($(this).find('option:selected').text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="jens_id[]" id="jens_id" required="">
<option ></option>
<option >1</option>
<option >2</option>
</select>
<select name="jens_id[]" id="jens_id" required="">
<option ></option>
<option >3</option>
<option >4</option>
</select>
Add multiple attribute to select if multiple values needs to be selected.
I have grid which has 'N' number of rows. I have a select box on each row with three options.
<tr>
<td>
<select id="1">
<option>YES</option>
<option>NO</option>
<option>IGNORE</option>
</select>
<td>
</tr>
<tr>
<td>
<select id="2">
<option>YES</option>
<option>NO</option>
<option>IGNORE</option>
</select>
<td>
</tr>
<tr>
<td>
<select id="3">
<option>YES</option>
<option>NO</option>
<option>IGNORE</option>
</select>
<td>
</tr>
I would like to show an alert when the user selects IGNORE secondly. I dont want to show the alert when the user select 'IGNORE' on first time.
Let us consider select ID#1, i dont want to show an alert if the user choose 'IGNORE' or 'YES' for the first time. But if the user has already clicked on 'YES' or 'NO' and then tries to click on 'IGNORE' next time then i want to show an alert.
This function has to work on all select box. Can somebody help to resolve this.
You can create a javascript map that maintains count of how many time a value in dropdown is selected. If that count is more than 1 for a dropdown, you can show alert.
<tr>
<td>
<select id="1" onchange="updateSelectionCount('1')">
<option>YES</option>
<option>NO</option>
<option>IGNORE</option>
</select>
<td>
</tr>
<tr>
<td>
<select id="2" onchange="updateSelectionCount('2')">
<option>YES</option>
<option>NO</option>
<option>IGNORE</option>
</select>
<td>
</tr>
<tr>
<td>
<select id="3" onchange="updateSelectionCount('3')">
<option>YES</option>
<option>NO</option>
<option>IGNORE</option>
</select>
<td>
</tr>
<script>
var map = new Object();
function updateSelectionCount(comboId){
var e = document.getElementById(comboId);
var selectedValue = e.options[e.selectedIndex].value;
if(selectedValue=='IGNORE'){
if(map[comboId]==1){
alert('selected second time');
}else{
map[comboId]=1;
}
}else{
map[comboId]=1;
}
}
</script>
If you want to use jquery you can also do this:
<script type="text/javascript">
$( document ).ready(function() {
$('select').on('change', function() {
if (typeof this.count == 'undefined')
{
this.count = 0;
}
else{
if (this.count>=0 && this.value=="2")
{
alert("my Warning")
}
this.count += 1
}
})
});
</script>
<select>
<option value="0">YES</option>
<option value="1">NO</option>
<option value="2">IGNORE</option>
</select>
<select>
<option value="0">YES</option>
<option value="1">NO</option>
<option value="2">IGNORE</option>
</select>
Still learning jquery here, so forgive any ignorance.
I have a table that contains a number of rows. Each row has a <select> tag and I want to "toggle" its value when I execute a function. So here's what the table looks like for example:
<table align="center" class="table table-bordered table-hover table-condensed table-responsive">
<thead>
...
</thead>
<tbody>
<tr>
<td class="text-center"><input id="item_ids_" name="item_ids[]" type="checkbox" value="11521"></td>
<td class="text-center">Item value here</td>
<td class="text-center">
<select class="form-control" id="item_11521_color" name="item[11521][color]">
<option selected="selected" value="None">None</option>
<option value="Blue">Blue</option>
<option value="Orange">Orange</option>
<option value="Green">Green</option>
<option value="Yellow">Yellow</option>
<option value="Purple">Purple</option>
</select>
</td>
<td class="text-center">
<select class="form-control" id="item_11521_test" name="item[11521][test]">
<option selected="selected" value="None">None</option>
<option value="First">First</option>
<option value="Second">Second</option>
</select>
</td>
</tr>
</tbody>
</table>
How can I iterate through each row and change the value (and text) <option value="Blue"> to <option value="Orange"> etc each time I run this function?
Is this what you are looking for? (code updated)
$("#change").on("click", function() {
// loop throw all rows
$("table tr").each(function() {
// on a row, find the checkbox and change the values if it's checked
if($(this).find("input[type='checkbox']").prop("checked")) {
$(this).find(".color-select").val("Green");
$(this).find(".position-select").val("First");
}
});
});
Added a button to perform the change:
<button id="change">change all to Green and first</button>
And classes to the selects for simplicity:
<select class="form-control color-select" id="item_11521_color" name="item[11521 [color]">
<select class="form-control position-select" id="item_11521_test" name="item[11521][test]">
EDIT:
Made required changes to the code.
The updated fiddle: http://jsfiddle.net/theagitator/44vqugf0/1/
I want to display label when user choose one of the value in drop down list.
These are my coding.
<table>
<tr>
<td>Spend Amount </td>
<td>
<select name="amountSpend">
<option value="Less">Less </option>
<option value="More">More</option>
<option value="By">range</option>
</select>
</td>
</tr>
</table>
For example, when user choose less, I want to display "less than 10" using label.
Thanks
You can utilize document.getElementsByName to retrieve the select and handle the onchange event:
<label id="foo"></label>
<table>
<tr>
<td>Spend Amount </td>
<td>
<select name="amountSpend">
<option value="Less">Less </option>
<option value="More">More</option>
<option value="By">range</option>
</select>
</td>
</tr>
</table>
<script>
document.getElementsByName('amountSpend')[0].onchange = function(e){
document.getElementById('foo').innerHTML = this.value + ' than 10';
};
</script>
Example:
http://jsfiddle.net/XkXrv/