Chained Select mit NO jQuery oder Ajax

Question

Ich benutze XAMPP Lite - USB Version und festgestellt, dass die jQuery verkettete Auswahl Boxen Skripte nicht funktionieren, weil sie auf AJAX verlassen, die auf meinem XAMPP nicht funktioniert.

Ich habe zwei Select-Boxen:

<label>Province</label> 
<select name="province"> 
<option value="ontario">Ontario</option> 
<option value="quebec">Quebec</option> 
<option value="novascotia">Nova Scotia</option> 
</select> 

<label>city</label> 
<select name="city"> 
</select> 

Ich brauche eine Provinz wählen zu können und laden verschiedene Städte in die „Stadt“ Namen wählen. Ich muss dies ohne jQuery oder Ajax tun. FYI Es spielt keine Rolle, wie lange die Javascript-Array-Variablen sein müssen, die alle Daten enthalten. Ich brauche nur jemanden, um mich mit dem Drehbuch anzufangen.

Answer 1

here's a quick sample, nicht optimiert, aber macht den Job. Wie gesagt, keine jQuery und kein AJAX. Dieses funktioniert in standardkonformen Browsern, man muss es für IE optimieren, weil ich keinen IE zum Testen habe.

<label>Province</label> 
<select id="province"> 
    <option value="p1">p1</option> 
    <option value="p2">p2</option> 
    <option value="p3">p3</option> 
</select> 

<label>city</label> 
    <select id="city"> 
</select> ​ 


window.onload = (function() { 

    var locations = { 
     'p1': [ 
      'p1c1', 
      'p1c2', 
      'p1c3', 
      ], 
     'p2': [ 
      'p2c1', 
      'p2c2', 
      'p2c3', 
      ], 
     'p3': [ 
      'p3c1', 
      'p3c2', 
      'p3c3', 
      ], 
    }; 

    var provinces = document.getElementById('province'); 
    var cities = document.getElementById('city'); 

    provinces.addEventListener('change', function() { 
     loadCities(this.value) 
    }, false) 


    var loadCities = (function loadCitiesFunc(key) { 
     key = key || 'p1'; 
     var docFragment = document.createElement('select'); 
     for (var i = 0; i < locations[key].length; i++) { 
      docFragment.appendChild(new Option(locations[key][i], locations[key][i])); 
     } 
     cities.innerHTML = docFragment.innerHTML; 

     return loadCitiesFunc; 
    }()) 

}());​