データが表示されないドロップダウンの人口

Question

私はj-queryを使って別のドロップダウンの選択に基づいてドロップダウンを設定する必要があるスクリプトを書いていますが、最初のドロップダウンを選択すると、私がどこかに間違っていたら私に！

script.html

<div class="form-group"> 
    <select id="json-one" class="form-control"> 
    <option selected="" value="base">Please Select</option> 
    <option value="Doctor">Doctor</option> 
    <option value="Engineer">Engineer</option> 
    <option value="Lawyer">Lawyer</option> 
    </select> 
</div> 

<div class="form-group"> 
    <select id="json-two" class="form-control"> 
     <option>Please choose from above</option> 
    </select> 
</div> 


<script> 
    var data = { 
"Doctor":"General,specilist", 
"Engineer":"Computers,electronic" 
"Lawyer":"Civil,Criminal" 
}; 
$("#json-one").change(function() { 

       var $dropdown = $(this); 

       //$.getJSON("data.json", function(data) { 

        var key = $dropdown.val(); 
        var vals = []; 

        switch(key) { 
         case 'Doctor': 
          vals = data.Doctor.split(","); 
          break; 
         case 'Engineer': 
          vals = data.Engineer.split(","); 
          break; 
         case 'Lawyer': 
          vals = data.Lawyer.split(","); 
          break; 
         case 'base': 
          vals = ['Please choose from above']; 
        } 

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

       }); 
      }); 
    </script> 

Answer 1

あなたのコードは正常に動作する必要がありますが、2つの物事の世話をする必要があります。

1：data.jsonファイルが必要です。

2：あなたは、それは以下のplunkerで働いて見ることができます取得JSON

{ 
    "beverages": "coke,pepsi", 
    "snacks":"chips,biscuit" 
} 

の成功コールバックでそれを消費しているようdata.jsonでJSONオブジェクトが同じ構造を持っている必要があります。

Plunker：私はthisフィドルにあなたと同じコードをチェックしたhttp://plnkr.co/edit/2dI09RIDuFGc9XMKXU1h?p=preview

Answer 2

。

唯一の違いは、jsonを非同期にロードしていないことです。したがって、json部品の読み込み、またはファイルがその場所に存在するかどうかを確認する必要があります。

<div class="form-group"> 
    <select id="json-one" class="form-control"> 
     <option selected="" value="base">Please Select</option> 
     <option value="beverages">Beverages</option> 
     <option value="snacks">Snacks</option> 
    </select> 
</div> 

<div class="form-group"> 
    <select id="json-two" class="form-control"> 
     <option>Please choose from above</option> 
    </select> 
</div> 

var data = { 
"beverages":"tea,coffee", 
"snacks":"namkeen,biscuits" 
}; 
$("#json-one").change(function() { 

       var $dropdown = $(this); 

       //$.getJSON("data.json", function(data) { 

        var key = $dropdown.val(); 
        var vals = []; 

        switch(key) { 
         case 'beverages': 
          vals = data.beverages.split(","); 
          break; 
         case 'snacks': 
          vals = data.snacks.split(","); 
          break; 
         case 'base': 
          vals = ['Please choose from above']; 
        } 

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

       }); 
      }); 

他に必要なことがある場合は教えてください。