To Display in another DropDown List

Question

 

Hi

  I have one dropdown listing 2 Cities . I want to display in another dropdown list of Schools on the basis of City selected . I have List of Schools in XML file .

<label for="City__c">City:</label>
<select id="City__c" name="picklist_City__c" class="optional">
  <option value="Buffalo">Buffalo</option>
  <option value="Rochester">Rochester</option>
</select><br />

 
    <script type="text/javascript" src="jquery.js"></script>
      <script type="text/javascript">
          $(document).ready(function()
          {
              $.ajax({
                  type: "GET",
                  url: "schoollist.xml",
                  dataType: "xml",
                  success: function(xml) {
                      var select = $('#mySelect');
                      $(xml).find('school').each(function() {
                          var ctyID = $(this).find('id').text();
                          var title = $(this).find('value').text();
                          var scityID = $('#Schools__c').val(); //$('select.foo').val()

                          alert(scityID);
                          if (ctyID == scityID) {
                          select.append("<option/><option>" + title + "</option>");
                          }
                      });
                  }
              });

          });

     </script>
    
      <select id="mySelect">
      </select>
    <input type="submit" name="submit" id="submitbox" value="Submit!">
    </form>
</body>
</html>

XML Files is

<?xml version="1.0" encoding="utf-8" ?>
<schools>
    <school>
      <id>Buffalo</id>
      <Name>ALLEN CREEK SCHOOL</Name>
      <value>ALLEN CREEK SCHOOL</value>
    </school>
        
  
    <school>
      <id>Rochester</id>
      <Name>ALLEN CREEK SCHOOL4</Name>
      <value>ALLEN CREEK SCHOOL4</value>
    </school>
        
</schools>

Thanks