We Keep Coding

Create drop down on clickable table row

I want to create a drop down after user clicks on a table row.How can i do this using bootstrap and JavaScript?
Here is My table

jQuery(document).ready(function($) {
$(".clickable-row").click(function(e) {
if(e.target.id != "listItems"){
$(this).find("#listItems").toggle();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
</div>
<table>
<tr class='clickable-row' data-href='url://'>
<td>1</td>
<td>ABC</td>
<td>123456789</td>
<td>
<select id="listItems">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
<tr class='clickable-row' data-href='url://'>
<td>2</td>
<td>BCD</td>
<td>123456789</td>
<td>
<select id="listItems">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
</table>

How to put data from jquery each into object variable

I have several select tags with different values of name attribute. I must get each of the value and put it into object variable. How to do it?
My code:
var obj = {};
$('.variants tbody tr td.value').children('select').each(function(index, value) {
alert($(this).attr('name'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="variants">
<tbody>
<tr>
<td>1</td>
<td class="value">
<select name="color">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr>
<td>2</td>
<td class="value">
<select name="size">
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</td>
</tr>
<tr>
<td>3</td>
<td class="value">
<select name="material">
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</td>
</tr>
</tbody>
</table>
Here, I must get
{"color":"selected_option_value", "size":"selected_option_value", "material":"selected_option_value"}

You should select all select elements in the table (you don’t need such a complex jQuery query to achieve so), iterate thru the collection; then for each element of the collection get its name (using the attr() function) and selected value (using the val() function) and create a property on the output object (obj) using the name of the select and assign its value to the select value.
// define the container object
var obj = {};
// for each select in the table
$('.variants select').each(function(index, select) {
// set the current item as a jQuery object
var current = $(select);
// sets the object key using the name of the select and the current selected value as the object key value
obj[current.attr('name')] = current.val();
});
// output
console.log(obj);
You could do the same using vanilla JavaScript too as in the other answers examples.

You can loop through the selection inputs with a forEach loop and fill in the obj object:
Select the input boxes and unwrap them in an array:
[...document.querySelectorAll('.value')]
in the loop select the child select element with:
menu.querySelector('select')
then add a new key/value pair in obj:
obj[element.getAttribute('name')] = element.value
↑ ↑
key value
So the full code looks like:
const obj = {}
document.querySelector('.button').addEventListener('click', (e) => {
[...document.querySelectorAll('.value')].forEach(menu => {
const element = menu.querySelector('select');
obj[element.getAttribute('name')] = element.value
})
console.log(obj)
})
I have set an event listener to show it working:
const obj = {}
document.querySelector('.button').addEventListener('click', (e) => {
[...document.querySelectorAll('.value')].forEach(menu => {
const element = menu.querySelector('select');
obj[element.getAttribute('name')] = element.value
})
console.log(obj)
})
<table class="variants">
<tbody>
<tr>
<td>1</td>
<td class="value">
<select name="color">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr>
<td>2</td>
<td class="value">
<select name="size">
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</td>
</tr>
<tr>
<td>3</td>
<td class="value">
<select name="material">
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</td>
</tr>
</tbody>
</table>
<button class="button">Give object</button>

You don't need jQuery to do this you, this will return an object on page load. You will have to wrap this in a function and add an event listener to return an object when the select values have changed or on form submission if thats what you are trying to accomplish
const variantsTable = document.querySelector('.variants')
const variantsSelects = Array.from(variantsTable.querySelectorAll('select'))
const obj = {}
variantsSelects.forEach(item => {
obj[item.name] = item.value
})
console.log(obj)

Output :
{"color":"1","size":"4","material":"7"}
You can try here :
const obj = {};
$('table.variants td.value select').each(function(index) {
obj[$(this).attr("name")] = $(this).val();
});
$("#output").text(JSON.stringify(obj));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="variants">
<tbody>
<tr>
<td>1</td>
<td class="value">
<select name="color">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr>
<td>2</td>
<td class="value">
<select name="size">
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</td>
</tr>
<tr>
<td>3</td>
<td class="value">
<select name="material">
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</td>
</tr>
</tbody>
</table>
<pre id="output"></pre>

show multi select id by js

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.

jQuery Select Swap Option on Change

I have a page that allows a user to select the order of how fields are displayed. The drop downs are dynamically created and you only have the number of options based on the number of fields there are.
For example, if there are 5 fields, you have options 1-5 to sort your fields by.
What I am trying to accomplish is when you select a number from the dropdown, it "Swaps" that number with whatever one previously held that spot.
If I changed Record 4 to 3, those two drop downs would now be swapped... if that makes sense.
In the example below, change one of the numeric dropdowns to another choice. The original choice that held that value is updated but the actual one you are changing doesn't get the new value.
JS Fiddle: https://jsfiddle.net/y7g155mh/4/
<table name="selectedFields" class="table table-condensed selectedFields">
<thead>
<tr>
<th class="small span1">
<input type="checkbox" id="checkAllSelected">
</th>
<th class="small">Field Name</th>
<th class="small">Sort Order</th>
<th class="small">Sort Type</th>
<th class="small">Display Order</th>
</tr>
</thead>
<tbody name="selectedRows">
<tr data-fid="5">
<td class="small"></td>
<td class="small">Request ID</td>
<td class="small">
<select data-current="1" data-type="sortOrder" class="span1" name="sortOrder">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
<td class="small">
<select class="span1" name="sortType">
<option value="-">-</option>
<option selected="selected" value="ASC">ASC</option>
<option value="DESC">DESC</option>
</select>
</td>
<td class="small">
<select data-current="1" data-type="displayOrder" class="span1" name="displayOrder">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
<tr data-fid="16">
<td class="small"></td>
<td class="small">Task ID</td>
<td class="small">
<select data-current="2" data-type="sortOrder" class="span1" name="sortOrder">
<option value="1">1</option>
<option selected="selected" value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
<td class="small">
<select class="span1" name="sortType">
<option value="-">-</option>
<option selected="selected" value="ASC">ASC</option>
<option value="DESC">DESC</option>
</select>
</td>
<td class="small">
<select data-current="2" data-type="displayOrder" class="span1" name="displayOrder">
<option value="1">1</option>
<option selected="selected" value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
<tr data-fid="9">
<td class="small"></td>
<td class="small">Task Start Date</td>
<td class="small">
<select data-current="3" data-type="sortOrder" class="span1" name="sortOrder">
<option value="1">1</option>
<option value="2">2</option>
<option selected="selected" value="3">3</option>
<option value="4">4</option>
</select>
</td>
<td class="small">
<select class="span1" name="sortType">
<option value="-">-</option>
<option selected="selected" value="ASC">ASC</option>
<option value="DESC">DESC</option>
</select>
</td>
<td class="small">
<select data-current="3" data-type="displayOrder" class="span1" name="displayOrder">
<option value="1">1</option>
<option value="2">2</option>
<option selected="selected" value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
<tr data-fid="17">
<td class="small"></td>
<td class="small">Task Completion Date</td>
<td class="small">
<select data-current="4" data-type="sortOrder" class="span1" name="sortOrder">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option selected="selected" value="4">4</option>
</select>
</td>
<td class="small">
<select class="span1" name="sortType">
<option value="-">-</option>
<option selected="selected" value="ASC">ASC</option>
<option value="DESC">DESC</option>
</select>
</td>
<td class="small">
<select data-current="4" data-type="displayOrder" class="span1" name="displayOrder">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option selected="selected" value="4">4</option>
</select>
</td>
</tr>
</tbody>
</table>
$('body').on('change', 'select', function() {
saveOrder($(this).val(), $(this).data('type'), $(this).data('current'));
});
// Update the field order numbers and save the data
function saveOrder(order, type, current) {
// First thing we need to do is swap the selected value with the one we are changing it for.
$('[name=' + type + ']').find('option[value="' + order + '"]:selected').parent().val(current);
return false;
// Do something here with storing data
}

It seems like this is what you want to achieve. There is room for improvement.
$('body').on('change', 'select', function() {
saveOrder($(this));
});
// Update the field order numbers and save the data
function saveOrder(select) {
var order = select.val(),
type = select.data('type'),
current = select.data('current');
$('select[name=sortOrder][data-current="'+current+'"]').val(order);
$('select[name=sortOrder][data-current="'+order+'"]').val(current);
return false;
// Do something here with storing data
}

Dynamic HTML value calculation using JQuery/Javascript

I wanted to create a table where dynamic values are displayed in a column depending on values selected by users. Below is my code for it. So basically, depending on the number of adults and number of children that are selected, the Price will be calculated. So if someone chooses 1 adult and 0 children, then the Amount for 2 Day ticket should be $235, for 3 day it will be $301 and so on. I want this done on selection change method of selectboxes. I am also not very familiar with JQuery. How do I accompalish this using JQuery?
Ages 10+:
<select id="Adult" name="Adult">
<option selected="selected" value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
Ages 3-9:
<select id="Child" name="Child">
<option selected="selected" value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<table width="800" border="1" align="center">
<tr>
<td width="224">Product</td>
<td width="246">Ages 10+</td>
<td width="192">Ages 3-9</td>
<td width="110">Price</td>
</tr>
<tr>
<td>2 Day Ticket</td>
<td>$235.00</td>
<td>$223.00</td>
<td>$<span class="amount"></span> </td>
</tr>
<tr>
<td>3 Day Ticket</td>
<td>$301.00</td>
<td>$285.00</td>
<td>$<span class="amount"></span></td>
</tr>
<tr>
<td>4 Day Ticket</td>
<td>$315.00</td>
<td>$298.00</td>
<td>$<span class="amount"></span></td>
</tr>
<tr>
<td>5 Day Ticket</td>
<td>$328.00</td>
<td>$309.00</td>
<td>$<span class="amount"></span></td>
</tr>
</table>

Here is complete code to accomplish what you're trying to do. I added some id's to the totals. See the fiddle for a working example. It would be better to not hard code the values, but this works as a starting point.
var numAdult = 0;
var numChild = 0;
$("#Adult").change( function(){
numAdult = $("#Adult").val();
calcTotals();
});
$("#Child").change( function() {
numChild = $("#Child").val();
calcTotals();
});
function calcTotals(){
$("#2DayTotal").text(235*numAdult + 223*numChild);
$("#3DayTotal").text(301*numAdult + 285*numChild);
$("#4DayTotal").text(315*numAdult + 298*numChild);
$("#5DayTotal").text(328*numAdult + 309*numChild);
}