如何根据另一个下拉菜单中选择的值填充一个下拉菜单？

Question

I have two dropdowns defined in JSP. The first dropdown fetches its values from the DB. On selection of a value in this dropdown, the corresponding values for the second dropdown should be fetched from the DB depending on the first dropdown's selected value. I have used Javascript and jquery to fetch the first dropdown's value. But I'm unable to figure out how to reference this value back in the JSP to populate the second JSP.

This is my JSP code for the two dropdowns:

First Dropdown:

<select name="dd1" id="dd1" style="width: 200px">
<option value="0">Choose New Salary</option>
     <%
     String Query1="select distinct Salary from TABLE1 where StartYear < 2005 order by Salary";
     Stmt1 = conn.createStatement();   
     ResultSet List1=Stmt1.executeQuery(Query1);

     while (List1.next())
     {
         int val1=List1.getInt("SALARY");
     %>

     <option value ="<%=val1%>"><%=val1%></option>
     <%            
      }
      %>                              

Second dropdown (I need to replace GETDD1DATA with the first dropdown's value):

<select id="dd2" style="width: 200px">
 <option value="0">Choose New Position</option>
 <%
 String Query2="select distinct POSITION from TABLE1 where Salary=" + GETDD1DATA + " order by POSITION";
 Stmt2 = conn.createStatement();   
 ResultSet List2=Stmt2.executeQuery(Query2);
 while (List2.next())
 {
       int val2=List2.getInt("POSITION");
 %>

 <option value ="<%=val2%>"><%=val2%></option>
 <%            
     }
 %>                           

This is the Javascript/Jquery code to fetch the first dropdown's data (I'm able to see that the first dropdown's value is correctly stored in the variable selectedValue1):

<script type="text/javascript">
   $(document).ready(function() {
     $("#dd1").change(function(){
      var selectedValue1 = $(this).val();
      //console.log(selectedValue1);
});
});
</script>

I need to pass the value of selectedValue1 from the Javascript to the JSP and reference it in the variable GETDD1DATA. I have explored session variables and hidden elements to store the dropdown1 value. But these wouldn't work since the Java scriplet would be executed only once on page load when the session variable hasn't been declared yet in the Javascript. I also think reloading the entire page wouldn't be an option since the dropdown would be reset to its default value. Kindly help me with solutions to my problem.

Answer 1

You are not using the javascript code to populate the first dropdownlist. You use javascript code to catch the event of selecting something in the first dropdownlist.

Also you cannot pass a value from javascript to JSP. Javascript can interact with the HTML resulting from a JSP page.

You seem not to have a clear concept of what a serverside language (in this case JSP) does and how it works. I suggest you read http://www.javaworld.com/article/2076557/java-web-development/understanding-javaserver-pages-model-2-architecture.html .

So you can fill in the second form in two ways: Do a postback to the server passing the selected value as argument and use java or jsp to fill in the second dropdownlist. This will result in a complete page refresh each time you select another item in the first dropdownlist.

The second option (better) is to use ajax. This consists of two parts. Server: expose a webserivce that based on an argument (selected value from dd1) will retrieve the values for dd2. Client: you allready have the event capture code in javascript. From javascript call the webservice with the selected value in dd1. Parse the results and put them in the dd2 using javascript.

For better understanding look up serverside scripting, POSTBACK and ajax(the latter does not require postback and keeps your page responsive, this is the way to go)

Answer 2

Please try with

var x;

$('#pu-country').on('change', function () {
    if (this.value != '0') {

        $('#pu-city').prop('disabled', false);
        $('#pu-city').find("option").not(":first").remove();
        $('#pu-location').prop('disabled', true);
        $('#pu-location').val("Choose");

        switch (this.value) {
            case 'A':
                x = '<option value="A.1">A.1</option><option value="A.2">A.2</option><option value="A.3">A.3</option>'
        }
        $('#pu-city').append(x)
    } else {
        $('#pu-location').prop('disabled', true);
        $('#pu-location').val("Choose");
        $('#pu-city').prop('disabled', true);
        $('#pu-city').val("Choose");
    }


});

$('#pu-city').on('change', function () {
    if (this.value != '0') {

        $('#pu-location').prop('disabled', false);
        $('#pu-location').find("option").not(":first").remove();

        switch (this.value) {
            case 'A.1':
                x = '<option value="A.1.1">A.1.1</option><option value="A.1.2">A.1.2</option><option value="A.1.3">A.1.3</option>'
                break;
            case 'A.2':
                x = '<option value="A.2.1">A.2.1</option><option value="A.2.2">A.2.2</option><option value="A.2.3">A.2.3</option>'
                break;
            case 'A.3':
                x = '<option value="A.3.1">A.3.1</option><option value="A.3.2">A.3.2</option><option value="A.3.3">A.3.3</option>'
                break;

        }

        $('#pu-location').append(x)
    } else {
        $('#pu-location').prop('disabled', true);
        $('#pu-location').val("Choose");
    }


});

If you want to check the demo then please try here

Fiddler