2番目のダイナミックドロップダウンリストをpageloadにロードするにはどうすればよいですか？

Question

私は2つのドロップダウンリストを含む動的なドロップダウンメニューを持っています。

ページが読み込まれると、2番目のドロップダウンリストは空になりますが、デフォルトでは両方のリストが表示されます。私の問題を説明するためにhttp://jazzkatt.net/dynamic/を参照してください。ここで

は私のコードです：事前に

<select id="json-one"> 
     <option selected value="norway">Norway</option> 
     <option value="usa">USA</option> 
     <option value="denmark">Denmark</option> 
    </select> 

    <br /> 

    <select id="json-two"> 

    </select> 

ありがとう：

<script> 
    $(function() { 

    $("#json-one").change(function() { 
    var $dropdown = $(this); 
     $.getJSON("jsondata/data.json", function(data) { 
     var key = $dropdown.val(); 
     var vals = []; 

     switch(key) { 
      case 'norway': 
      vals = data.norway.split(","); 
     break; 
      case 'usa': 
      vals = data.usa.split(","); 
     break; 
      case 'denmark': 
      vals = data.denmark.split(","); 
     } 

     var $jsontwo = $("#json-two"); 
     $jsontwo.empty(); 
     $.each(vals, function(index, value) { 
     $jsontwo.append("<option>" + value + "</option>"); 
     }); 

     }); 
    }); 
    }); 
</script> 

そして、ここでは、私がドロップダウンリストを表示するために使用HMTLコードです。

Answer 1

を与えるかもしれません。 だから、第二のリストは一度だけ最初のリスト（「＃のJSON-1」）に変更がある生成され、これらの変更

$(document).ready(function(){ // Change 1 

    $("#json-one").change(function() { 
    var $dropdown = $(this); 
     $.getJSON("jsondata/data.json", function(data) { 
     var key = $dropdown.val(); 
     var vals = []; 

     switch(key) { 
      case 'norway': 
      vals = data.norway.split(","); 
     break; 
      case 'usa': 
      vals = data.usa.split(","); 
     break; 
      case 'denmark': 
      vals = data.denmark.split(","); 
     } 

     var $jsontwo = $("#json-two"); 
     $jsontwo.empty(); 
     $.each(vals, function(index, value) { 
      $jsontwo.append("<option>" + value + "</option>"); 
     }); 

     }); 
    }); 

    $("#json-one").trigger('change'); // Change 2 
    }); 

Answer 2

あなただけchangeイベント、例えばトリガすることができます：あなたが変更イベントに選択した国をチェックするためのロジックを持っているので、値をドロップダウンから選択された場合にのみ起動されます

$(function() { 

    $("#json-one").change(function() { 
    var $dropdown = $(this); 
     $.getJSON("jsondata/data.json", function(data) { 
     var key = $dropdown.val(); 
     var vals = []; 

     switch(key) { 
      case 'norway': 
      vals = data.norway.split(","); 
     break; 
      case 'usa': 
      vals = data.usa.split(","); 
     break; 
      case 'denmark': 
      vals = data.denmark.split(","); 
     } 

     var $jsontwo = $("#json-two"); 
     $jsontwo.empty(); 
     $.each(vals, function(index, value) { 
     $jsontwo.append("<option>" + value + "</option>"); 
     }); 

     }); 
    }).change(); //<< trigger change event 
    }); 

Answer 3

を。私が提案するかもしれない1つの速い解決策は、document.readyイベントに同じロジックを置くことです。

$(document).ready(function() { 
    //load the city based on country selected 
}); 

希望これは、ドキュメントの準備ができて取得する最初のドロップダウンをトリガする必要があなたの出発点

Answer 4

してください。

ページロード時に2番目のリストを生成する場合は、init関数でこれを行う必要があります。

$(function() { 
    $.getJSON("jsondata/data.json", function(data) { 
    var key = $("#json-one").val() 
    var vals = []; 

    switch(key) { 
     case 'norway': 
     vals = data.norway.split(","); 
    break; 
     case 'usa': 
     vals = data.usa.split(","); 
    break; 
     case 'denmark': 
     vals = data.denmark.split(","); 
    } 

    var $jsontwo = $("#json-two"); 
    $jsontwo.empty(); 
    $.each(vals, function(index, value) { 
    $jsontwo.append("<option>" + value + "</option>"); 
    }); 

}); 

Answer 5

それはあまりにも簡単です。あなたのコードを以下のコードに置き換えればうまくいくでしょう。

<script> 
 

 
    $(document).ready(function() { 
 

 
    function getJsonOneDropdownSelectedValue() { 
 

 
     return $("#json-one").val(); 
 
    } 
 

 
    function populateJosnTwoDropdown() { 
 
     $.getJSON("jsondata/data.json", function(data) { 
 
     var key = getJsonOneDropdownSelectedValue(); 
 
     var vals = []; 
 

 
     switch (key) { 
 
      case 'norway': 
 
      vals = data.norway.split(","); 
 
      break; 
 
      case 'usa': 
 
      vals = data.usa.split(","); 
 
      break; 
 
      case 'denmark': 
 
      vals = data.denmark.split(","); 
 
     } 
 

 
     var $jsontwo = $("#json-two"); 
 
     $jsontwo.empty(); 
 
     $.each(vals, function(index, value) { 
 
      $jsontwo.append("<option>" + value + "</option>"); 
 
     }); 
 

 
     }); 
 
    } 
 

 
    // populate json two dropdown on the basic of json one 
 
    populateJosnTwoDropdown(); 
 

 
    // register change event of json one dropdown 
 
    $("#json-one").change(populateJosnTwoDropdown); 
 

 
    }); 
 

 

 
< /script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="json-one"> 
 
    <option selected value="norway">Norway</option> 
 
    <option value="usa">USA</option> 
 
    <option value="denmark">Denmark</option> 
 
</select> 
 

 
<br /> 
 

 
<select id="json-two"> 
 

 
</select>