How to add onChange event on Javascript to reload only the select option

Question

HTML

<form method="post" name="f1" action='dd-check.php'>
  <select  class="text" id="course_id" name='course_id' onChange="reload(this.form)">
    <option value=''>Select one</option>
    <option value=''><?php ?></option>
  </select>
    
  <select name="batch_id" id="batch_id">
    <option value=''>Select one</option>
    <option value=''><?php ?></option>
  </select>
</form>

Javascript

<script type="text/javascript">
  function reload(form)
  {
    var val = form.course_id.options[form.course_id.options.selectedIndex].value;
    self.location='dd.php?course_id=' + val ;
  }
</script>

In here the function reload the form. I want to reload only the first select box data, how to do that?

Answer 1

onchange() event depends on its element, thus reload() does not adjust the second select element "batch_id"

Additionally, before changing the location, add parameter selected index of two option elements.

    var s1 = document.getElementById("course_id");
    var o1 = s1.options.selectedIndex;

    var s2 = document.getElementById("batch_id");
    var o2 = s2.options.selectedIndex;

And then, in onload function you restore the option values selected before.

    var s1 = document.getElementById("course_id");
    s1.options.selectedIndex = o1;
    var s2 = document.getElementById("batch_id");
    s2.options.selectedIndex = o2;