Mirror multiple select fields jquery/javascript - javascript

I am new to JavaScript and HTML, and I want to achieve the following structure:
[Drop down 1]
[Option 1]
[Option 2]
[Drop down 2]
[Option 1]
[Option 2]
..and so on
Then I want the options reflected in TD's below like:
<td> </td><td class="sel1">Selected option from drop-down 1</td>
<td> </td><td class="sel2">Selected option from drop-down 2</td>
..and so on
UPDATE: Added Jfiddle as per request from Joshua Kisubi: https://jsfiddle.net/2ra5ptk1/1/
td {
font-family: calibri;
font-size: 14px;
border: 1px solid rgba(0, 0, 0, 0.2);
}
select,
body {
font-family: calibri;
font-size: 14px;
}
<body>
I need the selection from "Selection 1" to be outputted in the column to the right of "Results from selection 1" in the table below, and so on for each drop down. I don't know javascript or jQuery though, so I am not able to achieve this:<br><br>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
Selection 1:<br>
<select class="selection1">
<option value="choose">[Choose]</option>
<option value="option2">Sel1: Option 1</option>
<option value="option1">Sel1: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection2">
<option value="choose">[Choose]</option>
<option value="option2">Sel2: Option 1</option>
<option value="option1">Sel2: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection3">
<option value="choose">[Choose]</option>
<option value="option2">Sel3: Option 1</option>
<option value="option1">Sel3: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection4">
<option value="choose">[Choose]</option>
<option value="option2">Sel4: Option 1</option>
<option value="option1">Sel4: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection5">
<option value="choose">[Choose]</option>
<option value="option2">Sel5: Option 1</option>
<option value="option1">Sel5: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection6">
<option value="choose">[Choose]</option>
<option value="option2">Sel6: Option 1</option>
<option value="option1">Sel6: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection7">
<option value="choose">[Choose]</option>
<option value="option2">Sel7: Option 1</option>
<option value="option1">Sel7: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection8">
<option value="choose">[Choose]</option>
<option value="option2">Sel8: Option 1</option>
<option value="option1">Sel8: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection9">
<option value="choose">[Choose]</option>
<option value="option2">Sel9: Option 1</option>
<option value="option1">Sel9: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection10">
<option value="choose">[Choose]</option>
<option value="option2">Sel10: Option 1</option>
<option value="option1">Sel10: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection11">
<option value="choose">[Choose]</option>
<option value="option2">Sel11: Option 1</option>
<option value="option1">Sel11: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection12">
<option value="choose">[Choose]</option>
<option value="option2">Sel12: Option 1</option>
<option value="option1">Sel12: Option 2</option>
</select>
</td>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td>Result from selection 1:</td>
<td class="sel1">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 2:</td>
<td class="sel2">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 3:</td>
<td class="sel3">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 4:</td>
<td class="sel4">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 5:</td>
<td class="sel5">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 6:</td>
<td class="sel6">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 7:</td>
<td class="sel7">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 8:</td>
<td class="sel8">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 9:</td>
<td class="sel9">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 10:</td>
<td class="sel10">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 11:</td>
<td class="sel11">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 12:</td>
<td class="sel12">RESULT HERE</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
Can anyone give me any tips or resources on how to achieve this result?


You mixed up the usage of id versus classes in your html so it is hard to reference in javascript.
Use id for unique elements on a page and classes for similar ones.
that way you can attach an event handler to select elements at once.
Ofcourse you can have a for loop to attach to select with id 'sel'+ count but that is inefficient.
$(function() {
$('.selection').on('change', function(){
var sel_id = $(this).attr('data-id');
var sel_opt = $(this).val();
$('table td#'+sel_id).text(sel_opt)
})
});
td {
font-family:calibri;
font-size:14px;
border:1px solid rgba(0,0,0,0.2);
}
select, body {
font-family:calibri;
font-size:14px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
I need the selection from "Selection 1" to be outputted in the column to the right of "Results from selection 1" in the table below, and so on for each drop down. I don't know javascript or jQuery though, so I am not able to achieve this:<br><br>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
Selection 1:<br>
<select class="selection" data-id="sel1">
<option value="choose">[Choose]</option>
<option value="option2">Sel1: Option 1</option>
<option value="option1">Sel1: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection" data-id="sel2">
<option value="choose">[Choose]</option>
<option value="option2">Sel2: Option 1</option>
<option value="option1">Sel2: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection" data-id="sel3">
<option value="choose">[Choose]</option>
<option value="option2">Sel3: Option 1</option>
<option value="option1">Sel3: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection" data-id="sel4">
<option value="choose">[Choose]</option>
<option value="option2">Sel4: Option 1</option>
<option value="option1">Sel4: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection" data-id="sel5">
<option value="choose">[Choose]</option>
<option value="option2">Sel5: Option 1</option>
<option value="option1">Sel5: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection" data-id="sel6">
<option value="choose">[Choose]</option>
<option value="option2">Sel6: Option 1</option>
<option value="option1">Sel6: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection" data-id="sel7">
<option value="choose">[Choose]</option>
<option value="option2">Sel7: Option 1</option>
<option value="option1">Sel7: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection" data-id="sel8">
<option value="choose">[Choose]</option>
<option value="option2">Sel8: Option 1</option>
<option value="option1">Sel8: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection" data-id="sel9">
<option value="choose">[Choose]</option>
<option value="option2">Sel9: Option 1</option>
<option value="option1">Sel9: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection" data-id="sel10">
<option value="choose">[Choose]</option>
<option value="option2">Sel10: Option 1</option>
<option value="option1">Sel10: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection" data-id="sel11">
<option value="choose">[Choose]</option>
<option value="option2">Sel11: Option 1</option>
<option value="option1">Sel11: Option 2</option>
</select>
<br><br>Selection 1:<br>
<select class="selection" data-id="sel12">
<option value="choose">[Choose]</option>
<option value="option2">Sel12: Option 1</option>
<option value="option1">Sel12: Option 2</option>
</select>
</td><td>
<table cellpadding="0" cellspacing="0">
<tr>
<td>Result from selection 1:</td><td id="sel1">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 2:</td><td id="sel2">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 3:</td><td id="sel3">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 4:</td><td id="sel4">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 5:</td><td id="sel5">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 6:</td><td id="sel6">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 7:</td><td id="sel7">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 8:</td><td id="sel8">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 9:</td><td id="sel9">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 10:</td><td id="sel10">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 11:</td><td id="sel11">RESULT HERE</td>
</tr>
<tr>
<td>Result from selection 12:</td><td id="sel12">RESULT HERE</td>
</tr>
</table>
</td>
</tr>
</table>
</body>

Related

How to disable an option when selected more than 5 times in dynamically generated rows?

Following is my code :
<tr class = "dynamicRow">
<td class="dynamicStu"><b><bean:message key="label.student.code" />:</b>
</td><td >
<logic:present name="studentList">
<html:select property="dgList[0].stuCreate"
styleId="stuselect" onchange="setStudentLimit(this);">
<html:option value="">
<bean:message key="label.student.code" />
</html:option>
<html:optionsCollection name="masStudentForm"
property="studentList" label="label" value="value" />
</html:select>
</logic:present>
</td>
</div>
....
</tr>
At the end of the row I have an add button where this dropdown will be added dynamically.Along with this dropdown many other textfields are present.
My Requirement : When user selects the same option in the dropdown the valuesmore than 5 times the values should get disabled. Should happen on Onchange() of this dropdown. Kindly help.

You first need to get value of your selects using .val() then you need to iterate through all selects in your tables to see how many times that value is selected . If the value matches then increment the count and at the end you can check if the count value is > 5 then show alert or disable that option.
Demo Code ( with dummy datas) :
function setStudentLimit(el) {
var intKeyCount = 0;
var value = $(el).val(); //get that value
//iterate through all selects
$('.dynamicRow select').each(function() {
//if value matches
if ($(this).val() === value) {
intKeyCount++; //increment
}
});
if (intKeyCount > 5) {
alert("you cannot choose again");
//or disable that option
//$(el).find("option:selected").prop('disabled',true);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border='1'>
<tr>
<th>Selects</th>
</tr>
<tr class="dynamicRow">
<td>
<select onchange="setStudentLimit(this);">
<option value="">--Select---</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</td>
</tr>
<tr class="dynamicRow">
<td>
<select onchange="setStudentLimit(this);">
<option value="">--Select---</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</td>
</tr>
<tr class="dynamicRow">
<td>
<select onchange="setStudentLimit(this);">
<option value="">--Select---</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</td>
</tr>
<tr class="dynamicRow">
<td>
<select onchange="setStudentLimit(this);">
<option value="">--Select---</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</td>
</tr>
<tr class="dynamicRow">
<td>
<select onchange="setStudentLimit(this);">
<option value="">--Select---</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</td>
</tr>
<tr class="dynamicRow">
<td>
<select onchange="setStudentLimit(this);">
<option value="">--Select---</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</td>
</tr>
</table>

How to filter a table row using JQuery or Javascript

The scenario is , there is a table which contains dropdown selectbox in its 'td'. And, there is a dropdown selectbox outside which when selected filters table rows when values match in table's selectbox.
Here when selectFilter value is changed, it checks this value matches with the already 'selected' value in table.
Here some rows are hidden, so we need to filter the rows that is only visible .
Here is fiddle link: https://jsfiddle.net/manzer/8q7owxj5/
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</head>
<body>
<select id="selectFilter">
<option>Select...</option>
<option value="cat">Cats</option>
<option value="dog">Dogs</option>
<option value="birds">Birds</option>
</select>
<br>
<br>
<table id="animals">
<tbody>
<tr >
<td>
<select>
<option value="dog">Dog<</option>
<option value="cat" selected>Cat</option>
<option value="birds">Birds<</option>
</select>
</td>
</tr>
<tr style="display:none;">
<td>
<select>
<option value="dog">Dog<</option>
<option value="cat" selected>Cat</option>
<option value="birds">Birds<</option>
</select>
</td>
</tr>
<tr >
<td>
<select>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="birds" selected>Birds</option>
</select>
</td>
</tr>
<tr style="display:none;">
<td>
<select>
<option value="dog">Dog<</option>
<option value="cat" selected>Cat</option>
<option value="birds">Birds<</option>
</select>
</td>
</tr>
<tr>
<td>
<select>
<option value="dog">Dog</option>
<option value="cat" selected>Cat</option>
<option value="birds">Birds</option>
</select>
</td>
</tr>
<tr style="display:none;">
<td>
<select>
<option value="dog">Dog<</option>
<option value="cat" selected>Cat</option>
<option value="birds">Birds<</option>
</select>
</td>
</tr>
<tr>
<td>
<select>
<option value="dog" selected>Dog</option>
<option value="cat">Cat</option>
<option value="birds">Birds</option>
</select>
</td>
</tr>
</tbody>
</table>
<br>
<script>
//here when selectFilter value is changed, it checks
//this value matches with the already 'selected' value in table.
//here some rows are hidden, so we need to filter the rows that is //only visible .
//we need to filter visible rows when value matches from dropdown
$('#selectFilter').change(function() {
alert("hi")
});
</script>
</body>
</html>

Here is working code. However, I have to remove/edit the missing/extra html (tr> tags in your HTML
$(document).ready(function () {
$('#selectFilter').change(function () {
var selectedVal = $("#selectFilter option:selected").val();
alert(selectedVal);
$('#animals tbody tr:visible').each(function () {
var val = $(this).find('select option:selected').text();
if (selectedVal.toLowerCase() != val.toLowerCase()) {
$(this).hide();
}
else {
$(this).show();
}
});
});
});

Clone all last columns dropdown javascript on button click

I am trying to clone the nth all columns of the html table where as my code converts only the last lows last column Dropdown on click i need all the dropdown of last column to be duplicated
JS Fiddle Demo
Example Present Status :
Day1 Dropdown 1
1 dd
2 dd
3 dd dd
on click
Expected out Put
Day1 Dropdown 1 Dropdown 2
1 dd dd
2 dd dd
3 dd dd
HTML:
<table id='tableID'>
<tbody>
<tr>
<th>day</th>
<th>
Dropdown1
</th>
</tr>
<tr>
<td>1</td>
<td>
<select id="BodyHolder_DD_Sub1" style="height:27px;width:150px;">
<option value="Select Subject">Select Subject</option>
<option value="Holiday">Holiday</option>
<option value="Lunch">Lunch</option>
<option selected="selected" value="ECO-17">ECO-17</option>
<option value="ECO-19">ECO-19</option>
</select>
</td>
</tr>
<tr>
<td>3</td>
<td>
<select id="BodyHolder_DD_Sub1" style="height:27px;width:150px;">
<option value="Select Subject">Select Subject</option>
<option value="Holiday">Holiday</option>
<option value="Lunch">Lunch</option>
<option selected="selected" value="ECO-17">ECO-17</option>
<option value="ECO-19">ECO-19</option>
</select>
</td>
</tr>
<tr>
<td>5</td>
<td>
<select id="BodyHolder_DD_Sub1" style="height:27px;width:150px;">
<option value="Select Subject">Select Subject</option>
<option value="Holiday">Holiday</option>
<option value="Lunch">Lunch</option>
<option selected="selected" value="ECO-17">ECO-17</option>
<option value="ECO-19">ECO-19</option>
</select>
</td>
</tr>
</tbody>
</table>
<input type="button" id="clone" value="Add New Row"></button>
JS:
$("#clone").on("click",function(){
var $tableBody = $('#tableID').find("tbody"),
$trLast = $tableBody.find("td:last"),
$trNew = $trLast.clone();
$trLast.after($trNew);
});

You also need to clone the th and add a value. This would work for now -> http://jsfiddle.net/kQpfE/248/
$("#clone").on("click", function () {
var newHeader = $('#tableID thead tr').append('<th></th>');
$('#tableID').find('th:last()').append('Dropdown' + ($('#tableID thead tr th').length - 1));
$.each($('#tableID tbody').find('tr'), function (i, v) {
$(v).append($(v).find('td:last()').clone());
});
});
Edit: Forgot to mention your use of the same ID Multiple times as well as your TH being in the Tbody, perhaps clean up your HTML first.
Edit2: After a screensharing session adapted the code to add the th and increment.

Change your html for this, cuz you were not using thead:
<table id='tableID'>
<thead>
<tr>
<th>day</th>
<th>
Dropdown1
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<select id="BodyHolder_DD_Sub1" style="height:27px;width:150px;">
<option value="Select Subject">Select Subject</option>
<option value="Holiday">Holiday</option>
<option value="Lunch">Lunch</option>
<option selected="selected" value="ECO-17">ECO-17</option>
<option value="ECO-19">ECO-19</option>
</select>
</td>
</tr>
<tr>
<td>3</td>
<td>
<select id="BodyHolder_DD_Sub1" style="height:27px;width:150px;">
<option value="Select Subject">Select Subject</option>
<option value="Holiday">Holiday</option>
<option value="Lunch">Lunch</option>
<option selected="selected" value="ECO-17">ECO-17</option>
<option value="ECO-19">ECO-19</option>
</select>
</td>
</tr>
<tr>
<td>5</td>
<td>
<select id="BodyHolder_DD_Sub1" style="height:27px;width:150px;">
<option value="Select Subject">Select Subject</option>
<option value="Holiday">Holiday</option>
<option value="Lunch">Lunch</option>
<option selected="selected" value="ECO-17">ECO-17</option>
<option value="ECO-19">ECO-19</option>
</select>
</td>
</tr>
</tbody>
</table>
<input type="button" id="clone" value="Add New Row"></button>
And your script for this:
$("#clone").on("click",function(){
var $tableBody = $('#tableID').find("tbody"),
$tableHead = $('#tableID').find("thead"),
$trLast = $tableBody.find("td:last");
$tableHead.find("tr").each(function(){ $(this).append($("<th>Dropdown "+ $tableHead.find("th").size() - 1 +"</th>")); });
$tableBody.find("tr").each(function(){ $(this).append($trLast.clone()); });
});

How to get Dropdownlist value on HTML Table Cell in a Row using javascript

I have a problem in getting the value of dropdownlist on HTML table. Below is my sample html and javascript.
<table>
<tr>
<td>
<select id="select1" onchange="getValue(this.value)">
<option value="$">--Please Select--</option>
<option value="val1">value 1</option>
<option value="val2">value 2</option>
<option value="val3">value 3</option>
</select>
</td>
<td id="row-1"></td>
</tr>
<tr>
<td>
<select id="select2" onchange="getValue(this.value)">
<option value="$">--Please Select--</option>
<option value="val1">value 1</option>
<option value="val2">value 2</option>
<option value="val3">value 3</option>
</select>
</td>
<td id="row-2"></td>
</tr>
</table>
<script type="text/javascript">
function getValue(data)
{
var myDiv = document.getElementById( "row-1" );
myDiv.innerHTML = data;
}
</script>
Each row has a unique td id. example:row-1, row-2 .. and so on.
When selecting an item on the dropdown, I want to display the dropdown value in each row inside the row cell. How can I do that? Please help.

Is this what you want?
<html>
<head></head>
<body>
<table>
<tr>
<td>
<select id="select1" onchange="getValue(this)">
<option value="$">--Please Select--</option>
<option value="val1">value 1</option>
<option value="val2">value 2</option>
<option value="val3">value 3</option>
</select>
</td>
<td id="select1-value"></td>
</tr>
<tr>
<td>
<select id="select2" onchange="getValue(this)">
<option value="$">--Please Select--</option>
<option value="val1">value 1</option>
<option value="val2">value 2</option>
<option value="val3">value 3</option>
</select>
</td>
<td id="select2-value"></td>
</tr>
</table>
<script type="text/javascript">
function getValue(data)
{
var myDiv = document.getElementById( data.id + '-value' );
myDiv.innerHTML = data.value;
}
</script>
</body>
</html>

You can try this:
<table>
<tr>
<td>
<select id="select1">
<option value="$">--Please Select--</option>
<option value="val1">value 1</option>
<option value="val2">value 2</option>
<option value="val3">value 3</option>
</select>
</td>
<td id="row-1"></td>
</tr>
<tr>
<td>
<select id="select2">
<option value="$">--Please Select--</option>
<option value="val1">value 1</option>
<option value="val2">value 2</option>
<option value="val3">value 3</option>
</select>
</td>
<td id="row-2"></td>
</tr>
</table>
$('select').change(function() {
var $this = $(this);
$this.parent().siblings('td[id^=row-]').html($this.val());
});
Here is the DEMO.

Pass the object:
onchange="getValue(this)"
Then, source.parentNode is the <td>, and source.parentNode.nextSibling is the adjacent <td>
function getValue(source) {
source.parentNode.nextSibling.innerHTML = this.value;
}

Multi select in form?

I am trying to auto populate two drop down fields in form with two rows of same table.
Getting confused on JavaScript
<tr>
<td width="100" valign="top" style="margin-top:0px"><label>Card</label></td>
<td><select name="cardid" >
<option value="">Select</option>
<option value="1000">1000</option>
<option value="1001">1001</option>
<option value="1002">1002</option>
<option value="1003">1003</option>
<option value="1004">1004</option>
</select>
</td>
</tr>
And i want to auto populate select 1000,1001,1002 for Center USA 1003 1004 for Center UK
<tr>
<td><label>Center</label></td>
<td><select name="center">
<option value="USA">USA</option>
<option value="UK">UK</option>
</select>
</td>
</tr>
Any help pl

Try this:
HTML:
<tr>
<td width="100" valign="top" style="margin-top:0px"><label>Card</label></td>
<td><select id="cardid" name="cardid" >
<option value="">Select</option>
<option value="1000">1000</option>
<option value="1001">1001</option>
<option value="1002">1002</option>
<option value="1003">1003</option>
<option value="1004">1004</option></select></td>
</tr>
<tr>
<td><label>Center</label> </td>
<td><select id="center" name="center">
<option value="USA ">USA </option>
<option value="UK "> UK </option>
</select> </td>
</tr>
Javascript:
var usa = "1000,1001,1002";
var uk = "1003,1004";
$(function(){
$('#cardid').change(function(){
if(usa.indexOf($(this).val()) != -1){
// found usa
$('#center').val($('#center > option:first-child').val());
}
else if(uk.indexOf($(this).val()) != -1){
//found uk
$('#center').val($('#center > option:last-child').val());
}
});
});
Here is demo

Categories

Resources