How to change the values of a drop box based on another drop box

[akshma]

Hi, i am using a jsp page that has 2 drop down boxes ,one is country and other is territory.I want to change the value of territory and on the change of country and one more requirement is that country drop down gets loaded with the arraylist in which result of query will be saved....I need urgent help.Thanks in advance!

[Oralloy]

Sounds like you're going to have to code some javascript into your page. What exactly are you trying to achieve?

1) Change country, the available territory list immediately, and silently changes?

2) Change country, the server is queried for a new territory list, which is then silently used to update the current page?

3) Change country, the page reloads with an updated territory list?

These are all variations on the theme. What matters are your requirements.

[akshma]

yes i think i would have to write javascript code.I want is the first 2 cases that you have written above,,,,i.e territory list changes with change in country and a query will be called in which country name will be passed.

[Oralloy]

Ok, it'll look something like this, but the javascript is probably wrong in the details. There are other folks here who might be able to help you with better craftsmanship.

<select name="country" id="country">
 <option value="">Please select...</option>
 <option value="-1">None</option>
 <option value="100">Country 0</option>
 <option value="101">Country 1</option>
 <option value="102">Country 2</option>
</select>
 
<select name="territory" id="territory">
 <option class="" value="">Please select...</option>
 <option class="-1" value="-1">None</option>
 <option class="100" value="">Please select...</option>
 <option class="100" value="-1">None</option>
 <option class="101" value="">Please select...</option>
 <option class="101" value="-1">None</option>
 <option class="101" value="1011">Country 1, Territory 1</option>
 <option class="101" value="1012">Country 1, Territory 2</option>
 <option class="101" value="1013">Country 1, Territory 3</option>
 <option class="101" value="1014">Country 1, Territory 4</option>
 <option class="102" value="">Please select...</option>
 <option class="102" value="1021">Country 2, Territory 1</option>
 <option class="102" value="1022">Country 2, Territory 2</option>
 <option class="102" value="1023">Country 2, Territory 3</option>
</select>
 
<script> 
 document.getElementById('country').onchange =
  function(event){
   territory = document.getElementById('territory');
   newCountry  = this.value
 
   for (ix=0; ix<options.length; ix++)
    if (options[ix].class = newCountry)
      options[ix].style.display = ''
    else
      options[ix].style.display = 'none'
  };
</script>