Get all select in table and replace them with their option - javascript

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>

Related

two select options - validate and hide option not needed

I'm trying to show a set of select option base on what is selected on another select option. I have some issue to understand the logic with the js script.
Example:
Any advice how to hide the other options which are not used
if TV show only value device, tsignal, blackscreen, other
If Radio show only the value: device, rsignal, other
$('#new').find('option').not('[value="device"]').remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<form>
<table>
<tbody>
<tr>
<td>Issue:</td>
<td>
<select required id="test" name="test">
<option value="" disabled selected>Choose an option</option>
<option value="tv">tv</option>
<option value="radio">radio</option>
</select>
</td>
</tr>
<tr>
<td height="50px" colspan="3"></td>
</tr>
<tr>
<td>What is the problem?</td>
<td>
<select id="new" name="new">
<option value="" disabled selected>Select an option</option>
<option value="device">device is defect</option>
<option value="rsignal">radio has no signal</option>
<option value="tsignal">radio has no signal</option>
<option value="blackscreen">tv blackscreen</option>
<option value="other">Other</option>
</select>
</td>
</tr>
<tr>
<td><input type="submit" class="submit" value="submit"></td>
</tr>
</tbody>
</table>
</form>
I guess that you meant to use .change so when #test dropdown changed you check what its value and based on that show / hide options, right?
$('#test').change(function() {
const options = $('#new').find('option').show();
if ($(this).val() === 'tv') {
options.not('[value="device"]').hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<form>
<table>
<tbody>
<tr>
<td>Issue:</td>
<td>
<select required id="test" name="test">
<option value="" disabled selected>Choose an option</option>
<option value="tv">tv</option>
<option value="radio">radio</option>
</select>
</td>
</tr>
<tr>
<td height="50px" colspan="3"></td>
</tr>
<tr>
<td>What is the problem?</td>
<td>
<select id="new" name="new">
<option value="" disabled selected>Select an option</option>
<option value="device">device is defect</option>
<option value="rsignal">radio has no signal</option>
<option value="tsignal">radio has no signal</option>
<option value="blackscreen">tv blackscreen</option>
<option value="other">Other</option>
</select>
</td>
</tr>
<tr>
<td><input type="submit" class="submit" value="submit"></td>
</tr>
</tbody>
</table>
</form>
Notice Hide option is not cross browser

Getting selected values from dropdown inside table

For now I can get the selected values from the event onchange in my dropdown inside my table but it only works on the first row of my table. If I am going to change values from other rows it will still getting the value from the first row.
Here is my code:
<table class="sortable" border="1" id="table">
<thead>
<tr>
<th>Employee Serial</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr style="font-size:11px">
<td>#item.empSerial</td>
<td ALIGN="center">
<select onchange="getSelValue()" id="drpTechnical" class="testerDrop" style="height:20px; width:100px; text-align-last:center; cursor:pointer">
<option value=#item.technicalComp>#item.grade1</option>
<option value=#item.empSerial>0</option>
<option value=#item.empSerial>1</option>
<option value=#item.empSerial>2</option>
<option value=#item.empSerial>3</option>
<option value=#item.empSerial>4</option>
</select>
</td>
</tr>
}
</tbody>
</table>
And simple script to read the selected values:
function getSelValue() {
alert(document.getElementById("drpTechnical").value)
}
document.getElementById returns allways only the first element with this ID since IDs should be unique.
What you want is to get the id from that element that has been changed. So you need this
function getSelValue(this) {
alert(this.value)
}
And your table should look like this
<td ALIGN="center">
<select onchange="getSelValue(this)" id="drpTechnical" class="testerDrop" style="height:20px; width:100px; text-align-last:center; cursor:pointer">
<option value=#item.technicalComp>#item.grade1</option>
<option value=#item.empSerial>0</option>
<option value=#item.empSerial>1</option>
<option value=#item.empSerial>2</option>
<option value=#item.empSerial>3</option>
<option value=#item.empSerial>4</option>
</select>
</td>
i think you made a small mistake there, the id you set to the select tag is called "drpTechnical" but in the function you try to call element with id of "getSelValue"
Try change the codes like below
Code updates :
<td ALIGN="center">
<select onchange="getSelValue(this)" class="testerDrop"
style="height:20px; width:100px; text-align-last:center; cursor:pointer">
<option value=#item.technicalComp>#item.grade1</option>
<option value=#item.empSerial>0</option>
<option value=#item.empSerial>1</option>
<option value=#item.empSerial>2</option>
<option value=#item.empSerial>3</option>
<option value=#item.empSerial>4</option>
</select>
</td>
<script>
function getSelValue(obj) {
alert(obj.value)
}
</script>
function getSelValue(e) {
alert(e.value)
}
<table class="sortable" border="1" id="table">
<thead>
<tr>
<th>Employee Serial</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr style="font-size:11px">
<td>#item.empSerial</td>
<td ALIGN="center">
<select onchange="getSelValue(this)" id="drpTechnical" class="testerDrop" style="height:20px; width:100px; text-align-last:center; cursor:pointer">
<option value=#item.technicalComp>#item.grade1</option>
<option value=#item.empSerial>0</option>
<option value=#item.empSerial>1</option>
<option value=#item.empSerial>2</option>
<option value=#item.empSerial>3</option>
<option value=#item.empSerial>4</option>
</select>
</td>
</tr>
</tbody>
</table>
Try this.

How to get the proper element knowing the exact 'th' text

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>

Fade-In & Out a <tbody> element on <select> change

I have a <select> drop-down menu which displays different input fields depending on what is selected using JavaScript.
<select name="country" onchange="SelectCheck(this);" id="country">
<option value="United States of America" id="USA">United States of America</option>
<option value="Afganistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antigua & Barbuda">Antigua & Barbuda</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Aruba">Aruba</option>
<option value="Australia">Australia</option>
...
</select>
The input tags are wrapped in <tbody> tags though. I had to do it this way because it's inside of a table and the <div> tag does not work.
<tbody id="USDLdiv" style="display:none;">
<tr>
<td><input type="text" placeholder="USA License No."></td>
</tr>
</tbody>
I would like to add a fade in & fade out effect when you switch between options.
All I got is:
$selectoption = $("#country");
$("select", $selectoption).change(function() {
$("tbody > tr", $selectoption).fadeOut();
});
But it's not working.
The code shown is looking for a <select> that is a descendant of #country but #country is a <select> and has no such descendent.
Similarly inside the event handler you are looking for a <tr> that is a descendant of the <select> and a has no such descendant
Try:
$("#country").change(function() {
$("tbody > tr").fadeOut();
});
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<select name="country" id="country">
<option value="usa">United States of America</option>
<option value="afg">Afghanistan</option>
<option value="alb">Albania</option>
<option value="alg">Algeria</option>
</select>
<table>
<tbody>
<tr id="usa">
<td><input type="text" placeholder="USA License No."></td>
</tr>
<tr id="afg">
<td><input type="text" placeholder="Afghanistan License No."></td>
</tr>
<tr id="alb">
<td><input type="text" placeholder="Albania License No."></td>
</tr>
<tr id="alg">
<td><input type="text" placeholder="Algeria License No."></td>
</tr>
</tbody>
</table>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('tr').hide();
$(document).on('change','#country', function(){
var send = $(this).val();
$('tr').fadeOut();
$('#'+send).fadeIn();
});
});
</script>
</html>
Hope it can help you!

Set "Select" option for all checked rows in jquery?

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/

Categories