I have got a table with a select option in it. After the select changes, the td's innerHTML should change to the selected value so the select disappears.
<table>
<tr>
<td>
<select onchange="update(param1, param2)">
<option value="Value 1">Value 1</option>
<option value="Value 1">Value 2</option>
</select>
</td>
</tr>
</table>
So, when I select Value 2, the table should look like this:
<table>
<tr>
<td>
Value 2
</td>
</tr>
</table>
How do I do this. I've tried things like parentNode, parent()..
It has to be javascript or jQuery.
function update(id, row) {
var val = document.activeElement.value;
var id = id;
var row = row;
if (val != '') {
$.post('../inc/helikopter_beheer.php', {val: val, id: id, row: row}, function(data) {});
$.post('../inc/gereedstelling_get_info.php', {id: id, rij: row}, function(data) {
var result = data.split(",");
// this.parents('id').innerHTML = result;
$(this).closest("td").html(result[0]);
alert(result[0]);
});
};
}
This is what I got. It's getting some data out of my database, turns it into result and i have to get result in my td instead of the select.
JQuery function that accomplishes it (once you've given your select element an id of mySelect):
$('#mySelect').on('change', function () {
var val = $(this).val();
$(this).parent().html(val);
});
JS Fiddle Demo
<table>
<tr>
<td>
<select id="wdm_select">
<option value="Value 1">Value 1</option>
<option value="Value 2">Value 2</option>
<option value="Value 3">Value 3</option>
</select>
</td>
</tr>
</table>
<script>
$(document).ready(function() {
$("#wdm_select").on("change",function() {
var selected_val = $(this).val();
$(this).parent().html( selected_val );
})
})
</script>
here is demo
$(document).on('change','#foo',function(){
$(this).parent('td').html($(this).val());
$(this).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<select id="foo">
<option value="">--Select--</option>
<option value="Value 1">Value 1</option>
<option value="Value 2">Value 2</option>
</select>
</td>
</tr>
</table>
Related
I have a piece of code where I am using a table with a select list that affects another select list when an option is selected. I am having trouble selecting the individual select list by it's class rather than all classes. Basically I can't think of the right syntax to just select that one table row ddl without affecting all select lists with the same class names.
Code
<tr id=100> //mockup of what my rows look like ID iterates, 101, 102, etc.
<td>
<select name="tbTest" id="tbTest" class="tbTestddl" style="max-width:200px">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>
</td>
<td>
<select name="tbAnswer" id="tbAnswer" class="tbAnswerddl" style="max-width:200px">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>
</td>
</tr>
JS
$('.tbTestddl').change(function () {
var TestID = $('option:selected', this).attr('TestID');
var rowID= $(this).closest('tr').attr('id');
GetAnswer(TestID, rowID);
});
function GetAnswer(TestID, rowID) {
$.ajax({
url: '/Test/GetAnswersList',
type: 'GET',
data: {
TestID: TestID
},
dataType: "json",
success: function (result) {
var clearddl= $('.tbAnswerddl');
clearddl.empty();
$.each(result, function () {
var option = document.createElement("option");
option.text = this.AnswerName;
option.value = this.AnswerID;
$('.tbAnswerddl').append(option);
});
}
});
You can use rowID to change only the particular row select using $("#" + rowID).find('.tbAnswerddl'). and use the same select to append options.
Demo Code (I have removed ajax code it was not needed in this demo):
//dummy data
var result = [{
"AnswerName": "abc",
"AnswerID": "123"
}, {
"AnswerName": "abcd",
"AnswerID": "123a"
}];
$('.tbTestddl').change(function() {
var TestID = $('option:selected', this).val();//value of select-box
var rowID = $(this).closest('tr').attr('id');
console.log("val -"+TestID)
console.log("rowid -"+rowID)
GetAnswer(TestID, rowID);
});
function GetAnswer(TestID, rowID) {
//finding slect under the row given
var clearddl = $("#" + rowID).find('.tbAnswerddl');
clearddl.empty();
$.each(result, function() {
var option = document.createElement("option");
option.text = this.AnswerName;
option.value = this.AnswerID;
clearddl.append(option); //append to that row
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr id=102>
<td>
<select name="tbTest" id="tbTest" class="tbTestddl" style="max-width:200px">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>
</td>
<td>
<select name="tbAnswer" id="tbAnswer" class="tbAnswerddl" style="max-width:200px">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>
</td>
</tr>
<tr id=100>
<td>
<select name="tbTest" id="tbTest" class="tbTestddl" style="max-width:200px">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>
</td>
<td>
<select name="tbAnswer" id="tbAnswer" class="tbAnswerddl" style="max-width:200px">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>
</td>
</tr>
</table>
I have a table which its td value is corresponding to the value of the select dropdown. So when the dropdown is being selected, i would like the table to filter its table row according to the selected value. eg If One is selected,
the table will conduct filter and only show two table row which its td value is 1. Currently,the code isn't working for some reason.
$(document).ready(function($) {
$('#select').change(function() {
var selection = $(this).val();
var dataset = $('#select').find('tr');
dataset.show();
dataset.filter(function(index, item) {
return $(item).find('td:first-child').text().split(',').indexOf(selection) === -1;
}).hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id='select'>
<option value="1"> One </option>
<option value="2"> Two </option>
<option value="3"> Three </option>
<option value="4"> Four </option>
</select>
<table border="2">
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>1</td></tr>
</table>
just use table instead of select
var dataset = $('table').find('tr');
$(document).ready(function($) {
$('#select').change(function() {
var selection = $(this).val();
var dataset = $('table').find('tr');
dataset.show();
dataset.filter(function(index, item) {
return $(item).find('td:first-child').text().split(',').indexOf(selection) === -1;
}).hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id='select'>
<option value="1"> One </option>
<option value="2"> Two </option>
<option value="3"> Three </option>
<option value="4"> Four </option>
</select>
<table border="2">
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>1</td></tr>
</table>
selectfilter($('table'),$('#select').val());
$('#select').change(function() {
var selection = $(this).val();
$('table').find('tr').show();
selectfilter($('table'),selection);
});
function selectfilter(table ,selection)
{
table.find('tr').filter(function(index, item) {
return $(item).find('td:first-child').text().split(',').indexOf(selection) === -1;
}).hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='select'>
<option value="1"> One </option>
<option value="2"> Two </option>
<option value="3"> Three </option>
<option value="4"> Four </option>
</select>
<table border="2">
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>1</td></tr>
</table>
I have listbox and I can move items to another listbox with this code
$().ready(function() {
$('#add').click(function() {
return !$('#select1 option:selected').remove().appendTo('#select2');
});
$('#remove').click(function() {
return !$('#select2 option:selected').remove().appendTo('#select1');
});
});
<select multiple="multiple" name="listbox1" id="select1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
<td>
>><br/>
<<
<select multiple="multiple" name="listbox2" id="select2"></select>
With the code above I can move items from listbox1 to listbox2 and everything works fine.
I need to move items in listbox2 up and down
I googled and found that javascript code but I don't know how I can use it for listbox2 only
https://jsfiddle.net/m0f757wh/
Refer to this question.
I just added event listeners to the buttons and followed the above post. I think the code is self-explanatory. Let me know if you're confused.
$().ready(function() {
$('#add').click(function() {
return !$('#select1 option:selected').remove().appendTo('#select2');
});
$('#remove').click(function() {
return !$('#select2 option:selected').remove().appendTo('#select1');
});
let $select1 = $('#select1');
let $select2 = $('#select2');
$('#up1').click(function () {
let $selected = $select1.find('option:selected');
$selected.insertBefore($selected.prev());
});
$('#down1').click(function () {
let $selected = $select1.find('option:selected');
$selected.insertAfter($selected.next());
});
$('#up2').click(function () {
let $selected = $select2.find('option:selected');
$selected.insertBefore($selected.prev());
});
$('#down2').click(function () {
let $selected = $select2.find('option:selected');
$selected.insertAfter($selected.next());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<select multiple="multiple" name="listbox1" id="select1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
<td>
>><br/>
<<
<select multiple="multiple" name="listbox2" id="select2"></select>
</td>
</tr>
<tr>
<td>
<button id="up1">↑</button>
<button id="down1">↓</button>
</td>
<td>
<button id="up2">↑</button>
<button id="down2">↓</button>
</td>
</tr>
</table>
Selected dropdown values are changed. I need dto ynamically select and unselect the dropdown. Also unselected vaules from whole values only comes in other dropdown.
Sample code :
$(document).ready(function () {
var hideOptions = function () {
var $select = $('select');
$select.find('option').show();
$select.each(function () {
var $this = $(this);
var value = $this.val();
var $options = $this.parents('table').find('select').not(this).find('option');
var $option = $options.filter('[value="' + value + '"]');
if (value) {
$option.hide();
}
});
}
hideOptions();
$('select').on('change', function () {
hideOptions();
});
});
<table style="width:40%" class="requiredField">
<tbody>
<tr>
<th>Header</th>
<th>Mapping</th>
</tr>
<tr>
<td>dropdownA</td>
<td>
<select name="email">
<option value="">Select</option>
<option value="Email_Address">Email_Address</option>
<option value="Salutation">Salutation</option>
<option value="First_Name">First_Name</option>
<option value="Last_Name">Last_Name</option>
<option value="Gender">Gender</option>
<option value="Company" selected="selected">Company</option>
</select>
</td>
</tr>
<tr>
<td>dropdownB</td>
<td>
<select name="Salutation">
<option value="">Select</option>
<option value="Email_Address">Email_Address</option>
<option value="Salutation">Salutation</option>
<option value="First_Name">First_Name</option>
<option value="Last_Name">Last_Name</option>
<option value="Gender">Gender</option>
<option value="Company">Company</option>
</select>
</td>
</tr>
<tr>
<td>dropdownC</td>
<td>
<select name="First_Name">
<option value="">Select</option>
<option value="Email_Address">Email_Address</option>
<option value="Salutation">Salutation</option>
<option value="First_Name">First_Name</option>
<option value="Last_Name" selected="selected">Last_Name</option>
<option value="Gender">Gender</option>
<option value="Company">Company</option>
</select>
</td>
</tr>
<tr>
<td>dropdownD</td>
<td>
<select name="Last_Name">
<option value="">Select</option>
<option value="Email_Address">Email_Address</option>
<option value="Salutation">Salutation</option>
<option value="First_Name">First_Name</option>
<option value="Last_Name">Last_Name</option>
<option value="Gender">Gender</option>
<option value="Company">Company</option>
</select>
</td>
</tr>
<tr>
<td>dropdownE</td>
<td>
<select name="Gender">
<option value="">Select</option>
<option value="Email_Address">Email_Address</option>
<option value="Salutation">Salutation</option>
<option value="First_Name">First_Name</option>
<option value="Last_Name">Last_Name</option>
<option value="Gender">Gender</option>
<option value="Company">Company</option>
</select>
</td>
</tr>
<tr>
<td>dropdownF</td>
<td>
<select name="Gender">
<option value="">Select</option>
<option value="Email_Address">Email_Address</option>
<option value="Salutation">Salutation</option>
<option value="First_Name">First_Name</option>
<option value="Last_Name">Last_Name</option>
<option value="Gender">Gender</option>
<option value="Company">Company</option>
</select>
</td>
</tr>
</tbody>
</table>
Selected dropdown value changed after make this below the steps:
select from dropdownA -> Company into Email_Address
select from dropdownB -> Company
Now we can see the dropdownA values are changed. But I am choosing Email_Address in dropdownA.
Please correct me where I am wrong. Here's a demo: http://jsfiddle.net/ramalingam07/q8fcrxy9/
In you code:
$(document).ready(function () {
var hideOptions = function () {
var $select = $('select');
$select.find('option').show();
$select.each(function () {
var $this = $(this);
var value = $this.val();
var $options = $this.parents('table').find('select').not(this).find('option');
var $option = $options.filter('[value="' + value + '"]');
if (value) {
$option.hide();
$option.each(function () {
if (this.defaultSelected) {
$(this).parent('select').val('');
}
}, this);
}
});
}
hideOptions();
$('select').on('change', function () {
hideOptions();
});
});
After loaded, it'll first remove options from default selected items. Which is done by hideOptions before the $('select').change....
But it conflicts with
$option.each(function () {
if (this.defaultSelected) {
$(this).parent('select').val('');
}
}, this);
This codes is used to set defaultselected value to '' if other choose it. Which will never happen due to the pre-remove action, you either need to remove this part, or remove the pre-remove action, then it'll work.
Remove the defaultSelected
Remove preprocess
First one has already excluded the already selected options pop in other select, while the second remain the option, but when the value is selected by other select element, the default one becomes empty, choose one that hit what you intended to do.
I have what I thought would be a simple task.
A table of drop down lists, and a text box at the end of each line.
All I want to do is loop through each row of the table, get the "hours dropdown value" and multiply by the "rate dropdown value" - and place the result in the text box.
I just keep getting undefined when trying to get the dropdownlist values.
My HTML is:
<table class="hours-table">
<tr>
<th>Hours</th>
<th>Hourly Rate</th>
<th>Date Total</th>
</tr>
<tr>
<td>
<select id="HoursSelected1" name="HoursSelected" class="hours">
<option value="1">1</option>
<option value="2">2</option>
</select>
</td>
<td>
<select id="RateSelected1" name="RateSelected" class="rate">
<option value="1">1</option>
<option value="2">2</option>
</select>
</td>
<td class="date-total">
<input type="text" class="date-total" name="date-total-01" value="" />
</td>
</tr>
<tr>
<td>
<select id="HoursSelected2" name="HoursSelected" class="hours">
<option value="1">1</option>
<option value="2">2</option>
</select>
</td>
<td>
<select id="RateSelected2" name="RateSelected" class="rate">
<option value="1">1</option>
<option value="2">2</option>
</select>
</td>
<td class="date-total">
<input type="text" class="date-total" name="date-total-01" value="" />
</td>
</tr>
<tr>
<td>
<select id="HoursSelected3" name="HoursSelected" class="hours">
<option value="1">1</option>
<option value="2">2</option>
</select>
</td>
<td>
<select id="RateSelected3" name="RateSelected" class="rate">
<option value="1">1</option>
<option value="2">2</option>
</select>
</td>
<td class="date-total">
<input type="text" class="date-total" name="date-total-01" value="" />
</td>
</tr>
</table>
<p><a class="calculate" href="#" title="calculate row">Calculate</a>
</p>
My jQuery is:
$(document).ready(function () {
$('.calculate').on('click', function () {
$('.hours-table tr').each(function () {
var hours = $(this).find('select.hours').val();
var rate = $(this).find('select.rate').val();
var dateTotal = (hours * rate);
$(this).find('input.date-total').val(dateTotal);
});
return false;
});
});
Can anyone see where I've gone wrong please? There is a fiddle here: http://jsfiddle.net/Lr5pq/26/
Thank you, Mark
You have 2 problem in your code, first is neglecting the first row (the header row in the table) in your calculation, second using return false; which is deprecated and we use e.preventDefault();, instead, you can fix them like:
$('.hours-table tr').each(function () {
var hours = $(this).find('select.hours').val();
var rate = $(this).find('select.rate').val();
if (hours !== undefined && rate !== undefined) {
var dateTotal = (hours * rate);
$(this).find('input.date-total').val(dateTotal);
}
});
e.preventDefault();
BTW, if I were I would changed it like:
$(document).ready(function () {
$('.calculate').on('click', function (e) {
$('.hours-table tr').each(function () {
var hours = $(this).find('select.hours>option:checked').val();
var rate = $(this).find('select.rate>option:checked').val();
//this is for your header row
if (hours !== undefined && rate !== undefined) {
var dateTotal = (hours * rate);
$(this).find('input.date-total').val(dateTotal);
}
});
e.preventDefault();
});
});
as you see, we can use :checked instead of :selected, to select the selected option in a select node.
and it is your working jsfiddle
Try this:
$(document).ready(function () {
$('.calculate').on('click', function () {
$('.hours-table tr').each(function () {
var hours = $(this).find('select.hours > option:selected').val();
var rate = $(this).find('select.rate > option:selected').val();
var dateTotal = (hours * rate);
$(this).find('input.date-total').val(dateTotal);
});
return false;
});
});