title: Populate 2nd dropdown based on 1st dropdown selection using jQuery, ajax, struts2
body: <p><strong>Edit</strong> Is there any other way I can fill the 2nd drop down as per 1st drop down selection jquery ajax. Please post any link if anyone has one.</p>
  
  <hr>
  
  <p>I have update the second dropdown based on the first dropdown selection. I am using jQuery and Struts2. I want to update the second dropdown using jQuery ajax. Can someone please help me the code. I tried with the below method but somehow I was unable to pass the parameters to Action class. Thank you in advance.</p>
  
  <p><a href="http://www.joe-stevens.com/2010/02/23/populate-a-select-dropdown-list-using-jquery-and-ajax/" rel="nofollow noreferrer">http://www.joe-stevens.com/2010/02/23/populate-a-select-dropdown-list-using-jquery-and-ajax/</a></p>
  
  <p><strong>Edit:</strong>
  As per <a href="https://stackoverflow.com/users/213901/climbage">Climbage</a> said I am updating with code whatever I have.</p>
  
  <p><strong>caseSelect</strong> is first Dropdown, <strong>termSelect</strong> is second, <strong>casetermcodes</strong> is action. <strong>selCaseDropDown</strong> is hidden variable I want fetch the selected value of first dropdown in Action class where I have getter and setter methods for this variable. I first stuck at sending the selected value to action class. I have not did anything further this point.</p>
  
  <pre><code>    $("#caseSelect").change(
          function(){
          $("#result").html('Retrieving ...');
          var selCase = $("#caseSelect").val();
          $.ajax({
              type: "POST",
              url: "/dwdst/casetermcodes",
              data: {selCaseDropDown: selCase},
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              success: function(msg) {
                  $("#termSelect").get(0).options.length = 0;
                  $("#termSelect").get(0).options[0] = new Option("Term Codes", "-1");   
  
                  $.each(msg.d, function(index, item) {
                      $("#termSelect").get(0).options[$("#termSelect").get(0).options.length] = new Option(item.value, item.key);
                  });
              },
              error: function() {
                  alert("Failed to load Term Codes");
                  $("#result").hide();
              }
          });
      });
  </code></pre>
  
  <p>Action class :</p>
  
  <pre><code>public String execute(){
      logger.info("selected value &gt;&gt;"+selCaseDropDown);
      return SUCCESS;
  }
  
  public String getSelCaseDropDown(){
      return selCaseDropDown;
  }
  
  public void setSelCaseDropDown(String selCaseDropDown){
      this.selCaseDropDown = selCaseDropDown;
  }
  </code></pre>