How do I reset the value from the parameter passed by URL from Javascript in JSP

Question

This is my first question ever in this website which I hope I can explain it well. I did find the same problem but mostly in PHP and I don't really understand (e.g- How to replace url parameter with javascript/jquery?). Here my explaination:

I have a function in Javascript (in page testStudentFile.jsp):

<script language="javascript">

function onParamChange(){

 var thisForm = document.frmParam;
 
 var strBranch = thisForm.reqBranch.value;
 var strFaculty = thisForm.reqFaculty.value;
 var strCourse = thisForm.reqCourse.value;
 
 location.href ="testStudentFile.jsp?reqBranch="+strBranch+"&reqFaculty="+strFaculty+"&reqCourse="+strCourse;
}   

 </script>

Which get the value from here (and post at the same page):

<form name="frmParam" action="testStudentFile.jsp" method="POST">
      
<tr>
  <td width="20%"><strong>Branch:</strong></td>
  <td>
    <%renderDropDownList2(out, "reqBranch",  arrBranch,  requestValue.strBranch,"onchange=\"onParamChange()\"");%><%=strBranchDesc%>
  </td>
</tr>
<tr>
  <td width="20%"><strong>Faculty:</strong></td>
  <td>
    <%renderDropDownList2(out, "reqFaculty",  arrFaculty,  requestValue.strFaculty,"onchange=\"onParamChange()\"");%><%=strFacultyDesc%>
  </td>
</tr>
<tr align="left">
  <td><strong>Course: </strong></td>
  <td>
    <%renderDropDownList2(out, "reqCourse", arrCourse, requestValue.strCourse,"onchange=\"onParamChange()\"");%><%=strCourseDesc%>
  </td>
</tr>  
<tr align="left">
  <td>&nbsp;</td><td><strong><%out.print(arrStudent.size() + " students");%></strong>  
  </td>
</tr> 
<tr>
  <td></td>
  <td><input name="reqSearch" class="iform" type="submit" value="Search"></td>
</tr>   
</form>

And the data was retrieved from the method void that called data using sql query. Example one of the query:-

  <%!
public void populateBranch(JspWriter out, Connection ConnTC, ArrayList arrBranch)throws Exception{

 String sqlSelect =  " SELECT DISTINCT branch FROM university"+
      " WHERE active='Y'"+
      " AND branch='PK'"+
      " OR branch='ZZ'";
 //out.print(sqlSelect);
 PreparedStatement stmtSelect = ConnTC.prepareStatement(sqlSelect);
 ResultSet rsSelect = stmtSelect.executeQuery();
 while(rsSelect.next()){
  String strBranch  = getValue(rsSelect.getString("fbrncd"));
  arrBranch.add(strBranch);
  } 
 rsSelect.close();
 stmtSelect.close();
}
   %>

Here is my problem:

When I choose PK for branch, it will automatically list down the related faculties and next the related courses from the dropdownlists, but when I choose ZZ, the faculty and course choosen from PK branch didnt reset to the default(empty) before I can choose a faculty and a course for branch ZZ. How do I reset the dropdownlist (without reset button) to the default in the value of the parameter of the URL as stated in the Javascript above whenever the branch changed?

(Example)

From--> http://xxx.xxx.xx.x/portal/testApp/request/testStudentFile.jsp?reqBranch=PK&reqFaculty=FAS&reqCourse=AV

To--> http://xxx.xxx.xx.x/portal/testApp/request/testStudentFile.jsp?reqBranch=ZZ&reqFaculty=&reqCourse=

Warm Regards <3,

Eja ;-)

Answer 1

Do you want clear strFaculty and strCourse when branch is ZZ?? Then, just try this

var thisForm = document.frmParam;

var strBranch = thisForm.reqBranch.value;
var strFaculty = strBranch == 'ZZ' ? '' : thisForm.reqFaculty.value;
var strCourse = strBranch == 'ZZ' ? '' : thisForm.reqCourse.value;

location.href = ....

I hope that this is useful for you. Thanks.

Answer 2

Here is my solution to reset a dropdown list when another changes. Based on this thread and this one.

Simply call a function when the value is changed in one dropdown:

onchange="reset()"

In your reset function, select the element you wish to change index of and set it to 0:

var element = document.getElementById('id');
element.value = 0; // first value, an empty option in this example

Updated JSFiddle