いいえjQueryまたはAjaxで選択

Question

XAMPP Lite - USBバージョンを使用していて、XAMPPで動作していないAJAXに依存しているため、jQueryチェインのセレクトボックススクリプトが機能しないことがわかりました。

私は2つの選択ボックスを持っている：私は、地域を選択して、「都市」の名前を選択に異なる都市をロードできるようにする必要があり

<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> 

を。私はこれを行う必要がありますjQueryまたはAjaxなしで。 FYIそれはすべてのデータを保持するjavascriptの配列変数がどれくらいの期間必要であるかは関係ありません。私はスクリプトを使って私を始めてください誰かが必要です。

Answer 1

here's a quick sample、最適化されていませんが、ジョブを実行します。言ったように、jQueryもAJAXもありません。これは標準規格に準拠したブラウザで動作します。あなたはIEをテストするためのIEを持っていません。

<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; 
    }()) 

}());​