Remove From My Forums

javascript onchainge event - two dropdown list change by indexchanged.

Question
0

Sign in to vote

User-815166954 posted

I'd like to have a script where two <g class="gr_ gr_31 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="31" data-gr-id="31">dropdownlist</g> co-related each other by index. when a user selects an option from selection1 then change the selection of <g class="gr_ gr_442 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins doubleReplace replaceWithoutSep" id="442" data-gr-id="442">selection2</g> 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>

</select>

<br><br>

<br>0 = Daniel

<br>1 = John

<br>2 = Thomas

<br>3 = Jose

<br>4 = Vamsi

</form>

Monday, January 28, 2019 3:04 PM

Answers

User2103319870 posted

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

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Monday, January 28, 2019 5:05 PM

0

Sign in to vote
User-815166954 posted

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>

<form name ="EditForm" id="EditForm">

<select name="OffSNo" id="OffSNo" onchange="ChangeByIndex(window.document.EditForm.OffSNo.selectedIndex);">

<option>1</option>

<option>2</option>

<option>3</option>

<option>4</option>

<option>5</option>

</select>

<select name="OffName" id="OffName" onchange="ChangeByIndexB(window.document.EditForm.OffName.selectedIndex);">

<option>Daniel</option>

<option>John</option>

<option>Thomas</option>

<option>Jose</option>

<option>Gerge</option>

<option selected="selected">Jose</option>

</select>

<br><br>

<br>0 = Daniel

<br>1 = John

<br>2 = Thomas

<br>3 = Jose

<br>4 = Vamsi
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Monday, January 28, 2019 5:17 PM

All replies