I'll describe two ways to go: with/without AJAX.

1. If you want to do a synchronous form submit you'll need to attach onchange event to your first select element:

   
   
   

   <select name=select-one id=select-one onchange=this.form.submit()>
   
       <option value=1>1</option>
   
       <option value=2>2</option>
   
       <option value=3>3</option>
   
   </select>
   
   

   
   
   

   When done this way, the form will be submitted and first select option will be available as request.getParameter(select-one), based on which you'll provide data for second dropdown population, typically forwarding to a JSP.




2. If you want to retrieve a list via AJAX and repopulate another dropdown, you can send an AJAX request and handle returned data in a callback function:

   
   
   

   var val = $('#select-one option:selected').val();
   
   $.ajax({
   
       url: servletURL,//servlet URL that gets first option as parameter and returns JSON of to-be-populated options
   
       type: POST,//request type, can be GET
   
       cache: false,//do not cache returned data
   
       data: {one : val},//data to be sent to the server
   
       dataType: json//type of data returned
   
   }).done(function(data) {
   
       var second = $(#select-two);
   
       $.each(data, function() {
   
           options.append($(<option />).val(this.value).text(this.label));
   
       });
   
   });
   
   

   
   
   

   When done this way, the second dropdown will be repopulated without page refresh.