javascript onchainge event - two dropdown list change by indexchanged. [Answered]RSS

2 replies

Last post Jan 28, 2019 05:17 PM by parkcivic

‹ Previous Thread|Next Thread ›

Shortcuts

- Reply
parkcivic
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>

A2H

All-Star

50651 Points

9839 Posts

Re: javascript onchainge event - two dropdown list change by indexchanged.

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>

Sample Working Demo

Thanks,
Aje
My Blog | Dotnet Funda

- Reply
parkcivic
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>

‹ Previous Thread|Next Thread ›