Last post Jan 28, 2019 05:17 PM by parkcivic
Member
1 Points
2 Posts
Jan 28, 2019 03:04 PM|parkcivic|LINK
I'd like to have a script where two dropdownlist co-related each other by index. when a user selects an option from selection1 then change the selection of selection2 option by same selected index from selection1.
can anyone help?
<form name ="EditForm" id="EditForm">
<select name="select1" id="OffSNo" onchange="SelectSNo(this.form);">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option selected="selected">4</option>
</select>
<select name="select2" id="OffName" onchange="SelectName(this.form);">
<option>Daniel</option>
<option>John</option>
<option>Thomas</option>
<option>Jose</option>
<option>Gerge</option>
<option selected="selected">Jose</option>
<br><br>
<br>0 = Daniel
<br>1 = John
<br>2 = Thomas
<br>3 = Jose
<br>4 = Vamsi
</form>
All-Star
50651 Points
9839 Posts
Jan 28, 2019 05:05 PM|A2H|LINK
parkcivic when a user selects an option from selection1 then change the selection of selection2 option by same selected index from selection1.
You could use Jquery to change dropdownlist selection based on another dropdownlist. Sample code is provided below
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <script> $(document).ready(function() { //Attach onchange event to dropdownist $('#OffSNo').on('change', function() { //Set the OffSNo dropdownlist value based on OffName selected value $('#OffName').val($('#OffSNo :selected').val()); }); }); </script> </head> <body> <select name="select1" id="OffSNo"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option selected="selected">4</option> <option>5</option> </select> <select name="select2" id="OffName"> <option value="0">Daniel</option> <option value="1">John</option> <option value="2">Thomas</option> <option selected="selected" value="3">Jose</option> <option value="4" >Gerge</option> <option value="5" >Vamsi</option> </select> </body> </html>
Jan 28, 2019 05:17 PM|parkcivic|LINK
Thanks So much! I need to learn JQuery too. I might change to JQuery instead of Javascript.
I have figured out with javascript. Anyone who might need it can use below code too. Happy coding!!!
<script type="text/javascript">
function ChangeByIndex(IndexA)
{
document.getElementById("OffName").selectedIndex = IndexA;
}
function ChangeByIndexB(IndexB)
document.getElementById("OffSNo").selectedIndex = IndexB;
</script>
<select name="OffSNo" id="OffSNo" onchange="ChangeByIndex(window.document.EditForm.OffSNo.selectedIndex);">
<select name="OffName" id="OffName" onchange="ChangeByIndexB(window.document.EditForm.OffName.selectedIndex);">
Member
1 Points
2 Posts
javascript onchainge event - two dropdown list change by indexchanged.
Jan 28, 2019 03:04 PM|parkcivic|LINK
I'd like to have a script where two dropdownlist co-related each other by index. when a user selects an option from selection1 then change the selection of selection2 option by same selected index from selection1.
can anyone help?
<div> <div></div> <div><form name ="EditForm" id="EditForm">
</div> <div><select name="select1" id="OffSNo" onchange="SelectSNo(this.form);">
</div> <div><option>1</option>
</div> <div><option>2</option>
</div> <div><option>3</option>
</div> <div><option>4</option>
</div> <div><option>5</option>
</div> <div><option selected="selected">4</option>
</div> <div></select>
</div><div>
<select name="select2" id="OffName" onchange="SelectName(this.form);">
</div> <div><option>Daniel</option>
</div> <div><option>John</option>
</div> <div><option>Thomas</option>
</div> <div><option>Jose</option>
</div> <div><option>Gerge</option>
</div> <div><option selected="selected">Jose</option>
</div> <div></select>
</div> <div><br><br>
</div> <div><br>0 = Daniel
</div> <div><br>1 = John
</div> <div><br>2 = Thomas
</div> <div><br>3 = Jose
</div> <div><br>4 = Vamsi
</div> <div></form>
</div> </div>All-Star
50651 Points
9839 Posts
Re: javascript onchainge event - two dropdown list change by indexchanged.
Jan 28, 2019 05:05 PM|A2H|LINK
You could use Jquery to change dropdownlist selection based on another dropdownlist. Sample code is provided below
Aje
My Blog | Dotnet Funda
Member
1 Points
2 Posts
Re: javascript onchainge event - two dropdown list change by indexchanged.
Jan 28, 2019 05:17 PM|parkcivic|LINK
Thanks So much! I need to learn JQuery too. I might change to JQuery instead of Javascript.
I have figured out with javascript. Anyone who might need it can use below code too. Happy coding!!!
<div> <div><script type="text/javascript">
</div> <div>function ChangeByIndex(IndexA)
</div> <div>{
</div> <div>document.getElementById("OffName").selectedIndex = IndexA;
</div> <div>}
</div> <div>function ChangeByIndexB(IndexB)
</div> <div>{
</div> <div>document.getElementById("OffSNo").selectedIndex = IndexB;
</div> <div>}
</div> <div></div> <div></script>
</div><div>
<form name ="EditForm" id="EditForm">
</div><div>
<select name="OffSNo" id="OffSNo" onchange="ChangeByIndex(window.document.EditForm.OffSNo.selectedIndex);">
</div> <div><option>1</option>
</div> <div><option>2</option>
</div> <div><option>3</option>
</div> <div><option>4</option>
</div> <div><option>5</option>
</div><div>
</select>
</div><div>
<select name="OffName" id="OffName" onchange="ChangeByIndexB(window.document.EditForm.OffName.selectedIndex);">
</div> <div><option>Daniel</option>
</div> <div><option>John</option>
</div> <div><option>Thomas</option>
</div> <div><option>Jose</option>
</div> <div><option>Gerge</option>
</div> <div><option selected="selected">Jose</option>
</div> <div></select>
</div> <div><br><br>
</div><div>
<br>0 = Daniel
</div> <div><br>1 = John
</div> <div><br>2 = Thomas
</div> <div><br>3 = Jose
</div> <div><br>4 = Vamsi
</div> </div>