데이터가 표시되지 않는 드롭 다운의 인구

Question

j- 쿼리를 사용하는 다른 드롭 다운의 선택에 따라 드롭 다운을 채울 필요가있는 스크립트를 작성했습니다. 그러나 첫 번째 드롭 다운을 선택하면 다른 드롭 다운에 데이터가 표시되지 않습니다. 용서해주십시오. 내가 어딘가에 잘못 갔다면 나!

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

당신 코드는 잘 작동합니다하지만 당신은이 일에 대해 걱정해야합니다.

1 : data.json 파일이 있어야합니다.

2 : 당신은 당신이 아래의 plunker에서 작업을 볼 수 있습니다

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

가져 오기 JSON의 성공 콜백에서 소비 될 때 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>"); 
        //}); 

       }); 
      }); 

다른 것이 필요한 경우 알려주십시오.