i have set of drop downs with a select button below.
what i want to try to do is once the user has been through the three drop downs and pressed select, the option that is chosen is shown in a corresponding table in its assigned category
HTML:
<form method="POST">
<select name='first' id='first'>
<option selected="selected" value="nothing">choose</option>
<option value='opt_a'>opt a</option>
<option value='opt_b'>opt b</option>
</select>
<select name='sec' id='sec'>
</select>
<select name='third' id='third'>
</select>
<br />
<br />
<button id="select_btn" type="select" name="select">select</button>
<br />
<br />
<div id="result">
<table>
<tr>
<th>category</td>
<th>choice</td>
</tr>
<tr>
<td>choice 1</td>
<td></td>
</tr>
<tr>
<td>choice 2</td>
<td></td>
</tr>
<tr>
<td>choice 3</td>
<td></td>
</tr>
<tr>
<td>choice 4</td>
<td></td>
</tr>
<tr>
<td>choice 5</td>
<td></td>
</tr>
<tr>
<td>choice 6</td>
<td></td>
</tr>
<tr>
<td>choice 7</td>
<td></td>
</tr>
<tr>
<td>choice 8</td>
<td></td>
</tr>
</table>
</div>
</form>
JS:
data = {
opt_a: ['choose_1','choose_2','choose_3','choose_4'],
opt_b: ['choose_5','choose_6','choose_7','choose_8'],
choose_1: ['yes','no','unsure','still unsure'],
choose_2: ['yes','no','unsure','still unsure'],
choose_3: ['yes','no','unsure','still unsure'],
choose_4: ['yes','no','unsure','still unsure'],
choose_5: ['a','b','avg','unclear'],
choose_6: ['a','b','avg','unclear'],
choose_7: ['a','b','avg','unclear'],
choose_8: ['a','b','avg','unclear']
}
$('#first').change(function(){
var firstopts = ''
$.each(data[$(this).val()],function(i,v){
firstopts += "<option value='"+v+"'>"+v+"</option>"
})
$('#sec').html(firstopts)
})
$('#sec').change(function(){
var secopts = ''
$.each(data[$(this).val()],function(i,v){
secopts += "<option value='"+v+"'>"+v+"</option>"
})
$('#third').html(secopts)
})
CSS:
select{width:150px;}
#result{width:450px; border:2px solid #234323;}
td{width:225px; text-align:center}
th{background:#656454; color:#eee; text-align:center}
Thank You in advance for any help.
Since your data keys are called choose_N and your columns have the text choice N, you can match them by splitting the value and getting the last part:
var number1 = 'choose_1'.split('_')[1];
var number2 = 'choice 1'.split(' ')[1];
return number1 == number2; // corresponding choice
You could also annotate your HTML with the corresponding value, if you want something more exact:
<tr data-choice="choose_1">
<td>choice 1</td>
<td></td>
</tr>
$(myselector).data("choice"); // Will return "choose_1"
Now all you have to do is to select the right row (the one that corresponds to the value currently selected in #sec) and set the second column to the value currently selected in #third. You could do it on the click callback of the select button, but a better option is to do it on $('#third').change directly (so the user is saved from one extra button press):
$('#third').change(function() {
$('table tr').filter(function() { // Filters the rows, by:
var number1 = $('#sec').val().split('_')[1]; // comparing the value at #sec
var number2 = $(this).find('td:eq(0)').text().split(' ')[1]; // with the text of the first column.
return number1 == number2;
}).find('td:eq(1)').text($(this).val()); // Updates the second column.
});
Working example at jsFiddle. The only caveat is that, if the user wants to select the first option (the one already selected), he'll have to change it and change again for the event to trigger (in this sense, a select button is cleaner).
if you still want to do that only on button press, just replace $('#third').change(...) with $('#select_btn').click(...) (Edit: and $(this) to $('#third')). You might also have to use event.preventDefault, so the form isn't submitted.
Related
this is what I would like to do:
I have this list HTML
<table>
<tr>
<td class = "point">Point1</td>
</tr>
<tr>
<td class = "point">Point2</td>
</tr>
<tr>
<td class = "meanCurvature">mean Curvature 1</td>
</tr>
<tr>
<td class = "meanValue">mean Value 1</td>
</tr>
</table>
and a selector with several options.
Then I have a
JS
if($("#selector").val() == "strain"){
$(".point").show();
$(".meanCurvature").hide();
$(".meanValue").hide();
}
if($("#selector").val() == "curvature"){
$(".meanCurvature").show();
$(".point").hide();
$(".meanValue").hide();
}
if($("#selector").val() == "average"){
$(".meanValue").show();
$(".meanCurvature").hide();
$(".point").hide();
}
I would like to know: now I only have three class and it is handable, but is there a way to say "Show this class and Hide all other"?
I suggest this if you have limited number of rows in your table.
if($("#selector").val() == "strain"){
$(".point").show();
$('td').not('.point').hide();
}
if($("#selector").val() == "curvature"){
$(".meanCurvature").show();
$('td').not('.meanCurvature').hide();
}
if($("#selector").val() == "average"){
$(".meanValue").show();
$('td').not('.meanValue').hide();
}
you may want something like this
if($("#selector").val() == "strain"){
$(".point").show();
$(".point").parent().siblings('tr').children('td').hide();
}
If it were me, I would say
$("td").hide();
$(".desiredClass").show();
This will first hide all your table elements, then reveal the one you're interested in. However, I would also assign a class to your table, so you can avoid interfering with other tables on the page:
<table class="myTable">
...
and the javascript would then be
$(".myTable td").hide()
$(".desiredClass").show()
You could further improve this using advanced selectors
$(".desiredClass").show()
$(".myTable td:not(.desiredClass)").hide()
The above could would avoid any possible 'stuttering' by hiding and then revealing the desired element.
You can do it by showing all tds and then hide the ones that have other classes using not() function. Alternatively you can hid all tds and then show your selected class.
Before doing that, you need to convert your selector value to the desired class using a simple switch.
function apply() {
var selectedVal = $("#selector").val();
switch (selectedVal) {
case "strain":
selectedVal = "point";
break;
case "curvature":
selectedVal = "meanCurvature";
break;
case "average":
selectedVal = "meanValue";
break;
}
$("td").show().not("." + selectedVal).hide();
}
apply();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selector" onchange="apply()">
<option>strain</option>
<option>curvature</option>
<option>average</option>
</select>
<table>
<tr>
<td class="point">Point1</td>
</tr>
<tr>
<td class="point">Point2</td>
</tr>
<tr>
<td class="meanCurvature">mean Curvature 1</td>
</tr>
<tr>
<td class="meanValue">mean Value 1</td>
</tr>
</table>
You can make it easier and get rid of the switch if you can change your selector values to match the classes:
function apply() {
$("td").show().not("." + $("#selector").val()).hide();
}
apply();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selector" onchange="apply()">
<option value="point">strain</option>
<option value="meanCurvature">curvature</option>
<option value="meanValue">average</option>
</select>
<table>
<tr>
<td class="point">Point1</td>
</tr>
<tr>
<td class="point">Point2</td>
</tr>
<tr>
<td class="meanCurvature">mean Curvature 1</td>
</tr>
<tr>
<td class="meanValue">mean Value 1</td>
</tr>
</table>
you can use the :not selector such as:
$("td:not(.classToActuallyShow)").hide();
Will select all the table data(td) elements and hide them, unless they have a specific class.
My approach would be combine all those classes into one selector. Hide them all then filter the one you want to show based on a stored object that matches the value to the class
var classMatches ={
'strain':'point',
'curvature':'meanCurvature',
'average': 'meanValue'
};
var matchingClass = classMatches[$("#selector").val()];
$('.point, .meanCurvature, .meanValue')
.hide()
.filter('.'+ matchingClass ).show()
You can use not() as selector or as a method to selects all elements except the specified element.
Another way would be use multiple elements selector, like $(".point, .meanValue").hide();But it isnt reccomended if you have a lot of classes in this case.
Check this working example:
$("#selector").change(function(){
if($(this).val() == "strain"){
$(".point").show();
$("td:not(.point)").hide();
}
if($(this).val() == "curvature"){
$(".meanCurvature").show();
$(".point, .meanValue").hide();
}
if($(this).val() == "average"){
$(".meanValue").show();
$("td:not(.meanValue)").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selector">
<option disabled selected>Select option</option>
<option>strain</option>
<option>curvature</option>
<option>average</option>
</select>
<table>
<tr>
<td class = "point">Point1</td>
</tr>
<tr>
<td class = "point">Point2</td>
</tr>
<tr>
<td class = "meanCurvature">mean Curvature 1</td>
</tr>
<tr>
<td class = "meanValue">mean Value 1</td>
</tr>
</table>
I have 3 <select> from which I would like to filter a table and at the same time filter each other using their options. I will first show you the code:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div>
Select A type
<select id="A">
<option>Toate</option>
<option>A1</option>
<option>A2</option>
<option>A3</option>
</select>
</div>
<div>
Select B type
<select id="B">
<option>Toate</option>
<option>B1</option>
<option>B2</option>
<option>B3</option>
<option>B4</option>
<option>B5</option>
<option>B6</option>
</select>
</div>
<div>
Select C type
<select id="C">
<option>Toate</option>
<option>C1</option>
<option>C2</option>
<option>C3</option>
<option>C4</option>
<option>C5</option>
<option>C6</option>
<option>C7</option>
<option>C8</option>
<option>C9</option>
<option>C10</option>
</select>
</div>
<br/>
<table id="X">
<thead>
</thead>
<tbody>
<tr>
<td>A1,B1,C1</td>
</tr>
<tr>
<td>A1,B1,C2</td>
</tr>
<tr>
<td>A1,B1,C3</td>
</tr>
<tr>
<td>A1,B2,C4</td>
</tr>
<tr>
<td>A1,B2,C5</td>
</tr>
<tr>
<td>A1,B3,C6</td>
</tr>
<tr>
<td>A2,B4,C7</td>
</tr>
<tr>
<td>A2,B5,C8</td>
</tr>
<tr>
<td>A2,B5,C9</td>
</tr>
<tr>
<td>A3,B6,C10</td>
</tr>
</tbody>
</table>
</body>
</html>
and the script I managed to pull off so far is this:
$('#A,#B,#C').on('change', function() {
$('table tbody tr td').css("display", "none");
var optiuneaSelectata = this.value;
$('table tbody tr td:contains("' + optiuneaSelectata + '")').css("display", "table-cell");
})
If I choose for example A1, I want to show in the table all the td that contain A1, if I choose A2 show all the td that contain A2 and so on. My code does just that so far. The problem is that I want to restrict the other selects too. For example if I choose C10, in the first select I should only be able to choose A3 and in the second one B6.
You could use the following code. It has a helper function which will build a CSS selector based on the 3 selected values in the 3 select boxes. The function can accept parameters in which case an exception can be made for one select box. The CSS selector will then use a specified value instead of the selected value in that particular select box.
The function will apply that CSS selector and return the rows that match.
The click handler will first use the above function to show only the rows in the table that match the three selected values. Then it will check which values in a select box can be combined with the two other selected values to find at least one row, again using the above helper function:
// Helper function: returns rows that meet the condition in the 3
// select boxes. The optional arguments can specify one of the select boxes
// and which value to use instead of the selected value in that select box
function getRows(override, value) {
var filter = "table tbody tr td";
$("#A,#B,#C").each(function() {
var test = this === override ? value : $(this).val();
if (test !== "Toate") filter += ":contains(" + test + ")";
});
return $(filter).parent();
}
$('#A,#B,#C').on('change', function() {
$('table tbody tr').hide();
getRows().show();
$('#A,#B,#C').each(function (i, select) {
$('option', this).each(function () {
$(this).toggle(getRows(select, $(this).text()).length > 0);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
Select A type
<select id="A">
<option>Toate</option>
<option>A1</option>
<option>A2</option>
<option>A3</option>
</select>
</div>
<div>
Select B type
<select id="B">
<option>Toate</option>
<option>B1</option>
<option>B2</option>
<option>B3</option>
<option>B4</option>
<option>B5</option>
<option>B6</option>
</select>
</div>
<div>
Select C type
<select id="C">
<option>Toate</option>
<option>C1</option>
<option>C2</option>
<option>C3</option>
<option>C4</option>
<option>C5</option>
<option>C6</option>
<option>C7</option>
<option>C8</option>
<option>C9</option>
<option>C10</option>
</select>
</div>
<br/>
<table id="X">
<thead>
</thead>
<tbody>
<tr>
<td>A1,B1,C1</td>
</tr>
<tr>
<td>A1,B1,C2</td>
</tr>
<tr>
<td>A1,B1,C3</td>
</tr>
<tr>
<td>A1,B2,C4</td>
</tr>
<tr>
<td>A1,B2,C5</td>
</tr>
<tr>
<td>A1,B3,C6</td>
</tr>
<tr>
<td>A2,B4,C7</td>
</tr>
<tr>
<td>A2,B5,C8</td>
</tr>
<tr>
<td>A2,B5,C9</td>
</tr>
<tr>
<td>A3,B6,C10</td>
</tr>
</tbody>
</table>
You can simply put more parameters this way.
$("table tbody tr td:contains('A1'):contains('B1'):contains('C1')").css( "text-decoration", "underline" );
Good day people,so i have a jquery mobile page like that:
<div id="testTableDiv" style="overflow-y: auto; height: 250px">
<table class="ui-responsive ui-shadow gk-decorate table-stripe" id="testTable" is="jqm-table" data-role="table">
<thead>
<tr>
<th>Fruits</th>
<th>Numbers</th>
<th>Names</th>
<th>Countries</th>
<th>Animals</th>
</tr>
</thead>
<tbody>
.
.
content see Fiddle
</tbody>
</table>
</div>
<select id="selectId">
<option selected disabled>Choose Sort View</option>
<option>Names, Animals, Countries</option>
<option>Numbers, Fruits, Names</option>
<option>Countries, Numbers, Animales</option>
</select>
And based on the Selected option from the select menu i can filter that Table. Take a look at my snippet
function changeOrder(table, from, to) {
var rows = jQuery('tr', table);
var cols;
rows.each(function () {
cols = jQuery(this).children('th, td');
if (to < cols.length)
cols.eq(from).detach().insertBefore(cols.eq(to));
else
cols.eq(from).detach().insertAfter(cols.last());
});
}
$(document).ready(function() {
$('#testTable').data('origin-table', $('#testTable').html()).text();
$("body").on("change", "#selectId", function() {
if ($("#selectId option:selected").text() == "Names, Animals, Countries") {
$('#testTable').html($('#testTable').data('origin-table'));
var myTable = document.getElementById("testTable");
changeOrder(myTable,2,0);
changeOrder(myTable,4,1);
changeOrder(myTable,4,2);
$('td:nth-child(4),th:nth-child(4)').hide();
$('td:nth-child(5),th:nth-child(5)').hide();
}
if ($("#selectId option:selected").text() == "Numbers, Fruits, Names") {
$('#testTable').html($('#testTable').data('origin-table'));
var myTable = document.getElementById("testTable");
changeOrder(myTable,1,0);
$('td:nth-child(4),th:nth-child(4)').hide();
$('td:nth-child(5),th:nth-child(5)').hide();
}
if ($("#selectId option:selected").text() == "Countries, Numbers, Animales") {
$('#testTable').html($('#testTable').data('origin-table'));
var myTable = document.getElementById("testTable");
changeOrder(myTable,3,0);
changeOrder(myTable,2,1);
changeOrder(myTable,5,0);
$('td:nth-child(4),th:nth-child(4)').hide();
$('td:nth-child(5),th:nth-child(5)').hide();
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.css">
<div id="testTableDiv" style="overflow-y: auto; height: 250px">
<table class="ui-responsive ui-shadow gk-decorate table-stripe" id="testTable" is="jqm-table" data-role="table">
<thead>
<tr>
<th>Fruits</th>
<th>Numbers</th>
<th>Names</th>
<th>Countries</th>
<th>Animals</th>
</tr>
</thead>
<tbody>
<tr>
<td>Banana</td>
<td>2321</td>
<td>Kate</td>
<td>France</td>
<td>Tiger</td>
</tr>
<tr>
<td>Apple</td>
<td>819</td>
<td>John</td>
<td>Mexico</td>
<td>Dog</td>
</tr>
<tr>
<td>Orange</td>
<td>62</td>
<td>Jack</td>
<td>Italy</td>
<td>Cat</td>
</tr>
<tr>
<td>Banana</td>
<td>728</td>
<td>James</td>
<td>Spain</td>
<td>Lion</td>
</tr>
<tr>
<td>Mango</td>
<td>11</td>
<td>Charlie</td>
<td>Croatia</td>
<td>Turtle</td>
</tr>
<tr>
<td>Cherry</td>
<td>42</td>
<td>Ben</td>
<td>Japan</td>
<td>Bee</td>
</tr>
</tbody>
</table>
</div>
<select id="selectId">
<option selected disabled>Choose Sort View</option>
<option>Names, Animals, Countries</option>
<option>Numbers, Fruits, Names</option>
<option>Countries, Numbers, Animales</option>
</select>
Now i also want to sort that Table based on the first Column that will be shown.For example: When the user selectes the "Countires, Numbers, Animals" Select option i want to sort the table after the Countries like that:
Croatia 11 Mango
France 2321 Banana
Italy 62 Orange
Japan 42 Cherry
Mexico 819 Apple
Spain 728 Banana
The content gets added dynamically: But i have a array for each column like:countryArray[..]<br>numberArray[..]<br>... And i can already sort that array with the javascript method .sort()
Now comes my question how can i apply those sort changes onto my table? The column connection should of course still be available.
I managed to solve this problem with the answer from Alexander from this question here: Sorting multiple arrays at once.
What i did was: Since i got the Table content from each column in a array i simply ordered the appropriate array and adjust the others arrays to it. After that is done i just update my Table using the innerText method.
I have a table generated from database. And each field hidden until selected from select dropdown list. Also need calculate visible rows. I have this code, but it calculates all rows, even visibly. Could you advice how I can fix the code to calculate only visibly rows.
TABLE:
<table width="100%" border="0" id="sum_table">
<tr style="color:white;background:gray;">
<td>Name</td>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
</tr>
<tr id="one">
<td>Service 1</td>
<td>12</td>
<td>45</td>
<td>45</td>
<td>54</td>
</tr>
<tr id="two">
<td>Service 2</td>
<td>8</td>
<td>42</td>
<td>35</td>
<td>23</td>
</tr>
<tr id="three">
<td>Service 3</td>
<td>6</td>
<td>65</td>
<td>16</td>
<td>26</td>
</tr>
<tr id="result" style="background:silver;">
<td>TOTAL:</td>
<td id="total1">0</td>
<td>0</td>
<td></td>
<td></td>
</tr>
</table>
<br>ADD LINE:
<select id="select_stud">
<option>-- Select --</option>
<option>one</option>
<option>two</option>
<option>three</option>
</select>
JS:
$(document).ready(function () {
$('#one').hide();
$('#two').hide();
$('#three').hide();
$('#select_stud').change(function () {
$('#'+$(this).val()).show();
})
});
$("#sum_table tr:last td:not(:first,:last)").text(function(i){
var t = 0;
$(this).parent().prevAll().find("td:nth-child("+(i+2)+")").each(function(){
t += parseInt( $(this).text(), 10 ) || 0;
});
return "= " + t;
});
Also I need to calculate only 2 columns.
Here is full code: http://jsfiddle.net/stanencendo/u7a27vth/9/
Thanks.
Here's an example of what you are trying to do: http://jsfiddle.net/u7a27vth/10/
To only look at visible rows when calculating your sum, you can add a condition like this:
if ( $(this).parent().css('display') != 'none' )
You'll also want to update the sums every time you add a new column. You can do that by wrapping your sum calculation in a function (in this case, updateSums) and call it within your change function for the select element:
$('#select_stud').change(function () {
$('#'+$(this).val()).show();
updateSums();
})
That said, your approach probably isn't the best way to handle this. Typically, you want your view to be derived from your data, not the other way around.
Edit: As pointed out in the comments, if you want the last column to be calculated as well, you need to change $("#sum_table tr:last td:not(:first,:last)") to $("#sum_table tr:last td:not(:first)")
It wasn't clear to me whether or not this was you intention.
$("#sum_table tr:last td:not(:first,:last)").text(function(i){
var t = 0;
$(this).parent().prevAll().find("td:nth-child("+(i+2)+")").filter(":visible").each(function(){
t += parseInt( $(this).text(), 10 ) || 0;
});
return "= " + t;
});
Okay. This is a long one. So I have a page with a table containing various information about cars and the dealerships they came from. There is a button to add more cars with different years. This button opens a dialog. The dialog has 3 drop downs and one text input. I need the information from each drop down and the text input to add to the parent page. I'm halfway there. The information is adding the value of the input box, the text to the parent table within the "son" part of the table. I need this also to add the chosen value of the "son" drop downs on the same row of this text. One more thing. The "father" drop down needs to direct where the "son" information goes. Currently, my text is adding a new row to the bottom of the table under no specific father. I have stripped my code as much as possible so it's not overwhelming to look at, if there's a bracket missing somewhere it's an oversight. Here is the code and html for the parent page.
<head>
<script>
function updateParent1(value1,value2) {
var table = document.getElementById("car_table");
var rowCount = table.rows.length;
//alert(rowCount);
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
cell1.innerHTML = "";
var cell2 = row.insertCell(1);
cell2.innerHTML = value2;
</script>
</head>
<body>
<legend>Vehicle Information</legend>
<input type="text" id="shore_count" />
<div class="add_icon"><img src="images/add-item-icon.png"/></div>
<table id="car_table">
<thead>
<tr>
<th>Dealership</th>
<th>Vehicle Details</th>
</tr>
</thead>
<tbody>
<tr class="row_blue_bold father" id="father3">
<td colspan="2" class="father_header">John Eagle Honda</td>
</tr>
<tr class="row_blue_bold son3">
<td> </td>
<td>Honda 2011 - Civic</td>
</tr>
<tr class="row_blue_bold son3">
<td> </td>
<td>Honda 2008 - Accord</td>
</tr>
<tr class="row_blue_bold father" id="father4">
<td colspan="2" class="father_header">John's Used Cars</td>
<td>
</tr>
<tr class="son4">
<td> </td>
<td>Toyota 2002 - Camry</td>
</tr>
</body>
and here is the iframe/dialog page.
<script type="text/javascript">
$(document).ready(function () {
var id =3;
for (i=0;i<parent.getDescCount();i++) {
id++;
var prot = $("#numbers").find(".prototype").clone();
prot.find(".id").attr("value", id);
prot.find(".apni").attr("value","");
$("#numbers").append(prot);
}
//End of Add button
$("img.exit").click(function () {
parent.$.nmTop().close();
});
$("img.save").click(function () {
var isError = false;
$("input").each(function(i) {
if(this.value == "") {
isError = true;
var newRow = "<tr style='background:#ffff99'><td colspan='4'>Please enter the year of this vehicle.</td></tr><tr>";
$(this).parent().parent().before(newRow);
}
});
if(isError) return;
for(var j=0;j<document.getElementsByName("select1").length;j++) {
parent.updateParent1(document.getElementsByName("select1").item(j).value,document.getElementsByName("text1").item(j).value);
}
parent.$.nmTop().close();
});
});
//Add button
$("img.add").click(function () {
var prot = $("#numbers").find(".prototype").clone().first();
prot.find(".apni").attr("value","");
$("#numbers").append(prot);
}
</script>
<body>
<div id="selMultipleTitle"> Add Vehicle Information </div>
<div id="btnExitDialog"><img src="images/exit.png" height="17" width="17" class="exit"/></div>
<table id="numbers">
<thead>
<tr>
<th><strong>Make</strong></th>
<th><strong>Dealership</strong></th>
<th><strong>Model</strong></th>
<th><strong>Year</strong></th>
</tr>
</thead>
<tr>
<tbody>
<td><select id="fatherDeal" name="select1">
<option selected>Select...</option>
<option>John Eagle Honda</option>
<option>Toyota of America</option>
<option>John's Used Cars</option>
</select></td>
<td><select id="sonMake">
<option selected>Select...</option>
<option>Honda</option>
<option>Toyota</option>
</select></td>
<td><select>
<option selected id="sonModel">Select...</option>
<option>Civic</option>
<option>Accord</option>
<option>Camry</option>
</select></td>
<td><input value="Enter year" id="sonComment" class="apni" name="text1"/></td>
<td> </td>
</tbody>
</tr>
<tr>
<td class="align_right"><img src="images/cancel.gif" height="21" width="21" class="exit"/> <img src="images/save-icon1.png" height="21" width="21" class="save"/></td>
</tr>
</table>
</body>
Thanks in advance.
You need a dropdown as a source
<select id="source">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
And a target table
<table id="target">
</table>
And of course some kind of controller, I used a button.
<button id="control">clickme</button>
Now you only have to bind an action to the button and make it append the contents you want from your source into your target.
$(function() {
$('#control').click(function() {
$("#target").append("<tr><td>"+$("#source").val()+"</td></tr>");
});
});
Here is a fiddle: http://jsfiddle.net/X5DUv/