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

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/

Related

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.

Prevent multiple selection in drop down menu

I am loading data into multiple selectboxes, I am using laravel with vuejs. Loading data into select box via vuejs but I need that there are no multiple selections in the select box.
My sample select box
<tr>
<td>1</td>
<td>
<select name="test[]" id="test[]" class="js-example-basic-single form-control" style="width: 100%;">
<option value="">Select items</option>
<option v-for="category in categories" :value="category.cat_id">#{{category.name}}</option>
</select>
</td>
<td>
<input type="text" class="form-control items" id="cat_price[]" name="cat_price[]">
</td>
</tr>
<tr>
<td>1</td>
<td>
<select name="test[]" id="test[]" class="js-example-basic-single form-control" style="width: 100%;">
<option value="">Select items</option>
<option v-for="category in categories" :value="category.cat_id">#{{category.name}}</option>
</select>
</td>
<td>
<input type="text" class="form-control items" id="cat_price[]" name="cat_price[]">
</td>
</tr>
JS Function
$('#table1 tr').each(function() {
$(this).find('#test[]').change(function(){
// alert($(this).val());
if($('option[value='+$(this).val()+']:selected').length>1){
alert('option is already selected');
$(this).val($(this).find("option:first").val());
}
});
});
You can use this.
<option v-for="option in options" :disabled="selected.includes(option.value)" :value="option.value">
Ref: Vuejs disabled selected dropdown options?

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!

Multiple values from a dropdown issue

So far i have a dropdown which each has a corresponding number which works just fine. Each number also has a corresponding trait also which will be placed in the 4th column. So what i'm trying to ask is can the dropdown have two values attached to it (a number and a trait) or should I break it up into two parts (1: dropwdown displays a number & 2: number displays a trait)? and how to do that please and thanks you.
JS
$('#warmth').change(function () {
$('#warmthVal').val(this.value);
});
HTML
<table>
<tr>
<td><b>Factors</b></td>
<td><b>Sten Score</b></td>
<td><b>1-10</b></td>
<td><b>Personality Traits</b></td>
</tr>
<tr>
<td>Warmth (A)</td>
<td>
<select name="warmth" id="warmth">
<option value="">...</option>
<option value="1">0-4</option> //trait1
<option value="2">5-6</option> //trait2
<option value="3">7-9</option> //trait3
<option value="4">10-11</option> //trait4
<option value="5">12-14</option> //trait5
<option value="6">15-16</option> //trait6
<option value="7">17-18</option> //trait7
<option value="8">19-20</option> //trait8
<option value="9">21-22</option> //trait9
</select>
</td>
<td>
<input type="text" id="warmthVal" name="sten" disabled size="1" />
</td>
<td>
<input type="text" id="warmthTrait" name="warmthTrait" disabled size="1" />
</td>
</tr>
</table>
You can bind additional values to your DOM elements using data attributes. Here is how you do that.
JS
$('#warmth').change(function () {
$('#warmthVal').val(this.value);
$('#warmthTrait').val($(this).data("trait"));
});
HTML
<table>
<tr>
<td><b>Factors</b></td>
<td><b>Sten Score</b></td>
<td><b>1-10</b></td>
<td><b>Personality Traits</b></td>
</tr>
<tr>
<td>Warmth (A)</td>
<td>
<select name="warmth" id="warmth">
<option value="">...</option>
<option data-trait="trait1" value="1">0-4</option> //trait1
<option data-trait="trait2" value="2">5-6</option> //trait2
<option data-trait="trait3" value="3">7-9</option> //trait3
<option data-trait="trait4" value="4">10-11</option> //trait4
<option data-trait="trait5" value="5">12-14</option> //trait5
...
</select>
</td>
<td>
<input type="text" id="warmthVal" name="sten" disabled size="1" />
</td>
<td>
<input type="text" id="warmthTrait" name="warmthTrait" disabled size="1" />
</td>
</tr>
</table>
Hope it helps.

Categories