title: Jquery load State and City value according to selection from certain url
body: <p>I have the following code:</p>
  
  <pre><code>   &lt;label for="ItemCountry"&gt;Country &lt;span class="req"&gt;*&lt;/span&gt;&lt;/label&gt;
      &lt;select name="ItemCountry" id="ItemCountry" class="cat_dropdown" /&gt;
       &lt;option value="AU" selected="selected"&gt;Australia&lt;/option&gt;
       &lt;option value="CA"&gt;Canada&lt;/option&gt;
       &lt;option value="CN"&gt;China&lt;/option&gt;
       &lt;option value="NZ"&gt;New Zealand&lt;/option&gt;
       &lt;option value="RU"&gt;Russia&lt;/option&gt;
       &lt;option value="US"&gt;United State&lt;/option&gt;
     &lt;/select&gt;
  &lt;script type="text/javascript"&gt;
  $(function() {
  $('#ItemCountry').change(function() {
  var CountryVal = this.value; // value of the select element
  $("#StateFeeder").html('&lt;img src="/images/mapCountry/AU/ajax-loader.gif" class="IMG-Loading" /&gt;');
  $('#StateFeeder').load('/StateFeeder/StateFeeder-Buy.html #StateFeeder-'+CountryVal);
  })
  })               
  &lt;/script&gt;
  
  &lt;div id="StateFeeder"&gt;
    &lt;label for="ItemState"&gt;State / Province &lt;span class="req"&gt;*&lt;/span&gt;&lt;/label&gt;
    &lt;select name="ItemState" id="ItemState" class="cat_dropdown"&gt;
      &lt;option value=""&gt;-- Please select --&lt;/option&gt;
      &lt;option value="NSW"&gt;NSW&lt;/option&gt;
      &lt;option value="VIC"&gt;VIC&lt;/option&gt;
      &lt;option value="QLD"&gt;QLD&lt;/option&gt;
      &lt;option value="ACT"&gt;ACT&lt;/option&gt;
      &lt;option value="TAS"&gt;TAS&lt;/option&gt;
      &lt;option value="WA"&gt;WA&lt;/option&gt;
      &lt;option value="SA"&gt;SA&lt;/option&gt;
      &lt;option value="NT"&gt;NT&lt;/option&gt;
    &lt;/select&gt;e.g. NSW
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
   $(function() {
       $('#ItemState').change(function() {
           var StateVal = this.value; // value of the select element
           $("#CityFeeder").html('&lt;img src="/images/mapCountry/AU/ajax-loader.gif" class="IMG-Loading" /&gt;');
           $('#CityFeeder').load('/Country/'+CountryVal+'/_'+CountryVal+'_suburbs.html #Suburbs-'+StateVal, function(){
           $('#CityFeeder select').attr('size', '5');
           $('#CityFeeder select').change(function(){  this.form['CAT_Custom_221342'].value=$(this).val();
           }); });        
       })
    })               
  &lt;/script&gt;
      &lt;div id="CityFeeder"&gt;
      &lt;label for="ItemCity"&gt;City / Suburb &lt;span class="req"&gt;*&lt;/span&gt;&lt;/label&gt;
      &lt;input type="text" name="ItemCity" id="ItemCity" class="cat_textbox" maxlength="255" style="text-transform: capitalize;" /&gt;e.g. Chatswood
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>the last part is not working, which it suppose to pass the value of state selection into the url to load certain city dropdown stored from that state block in remote url, it seems that the "CountryVal" is not taking value into that url, please help me to correct it, many thanks:</strong></p>
  
  <pre><code>$('#CityFeeder').load('/Country/'+CountryVal+'/_'+CountryVal+'_suburbs.html #Suburbs-'+StateVal, function(){
      $('#CityFeeder select').attr('size', '5');
      $('#CityFeeder select').change(function(){
          this.form['CAT_Custom_221342'].value=$(this).val();
      }); 
  }); 
  </code></pre>