2016-07-15 2 views
1

Я написал сценарий, в котором мне нужно заполнить раскрывающийся список, основанный на выборе другого раскрывающегося списка с использованием 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> 
+0

Правильно ли заполнен вал? DId вы консольный журнал? –

+0

Вы нашли, где все пошло не так? Вызывается функция изменения функции? У вас есть правильные выпадающие списки после их выбора? Возвращает ли json с сервера? Имеет ли json правильные данные? Имеются ли у vals правильные данные после переключения? Включает ли цикл триггер? – Shilly

+0

Да, я проверил его выдачу действительных данных json ..! –

ответ

0

Вы код должен работать нормально, но вы должны заботиться о 2 вещи.

1: У вас должен быть файл data.json.

2: объект JSON в data.json должен иметь такую ​​же структуру, как вы потребляете его в успех обратного вызова ГЭТ JSON

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

вы можете увидеть, что работает в ниже plunker.

Plunker: http://plnkr.co/edit/2dI09RIDuFGc9XMKXU1h?p=preview

+0

спасибо тонна!! –

0

Я проверил тот же код, как ваши в this скрипке.

Единственная разница в том, что я не загружаю 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>"); 
        //}); 

       }); 
      }); 

Сообщите мне, если вам нужно что-нибудь еще.

+0

сэр спасибо за полезный ответ. У меня датирован мой код на тех же основаниях, но, к сожалению, он не работает, как я был .. !! –

+0

Пожалуйста, помогите мне, если вы не против ..! –

+1

@Ninja: Асинхронный вызов не имеет значения здесь, поскольку к данным обращаются в обратном вызове функции getJSON, и он будет выполняться только после получения данных JSON. – Deep

Смежные вопросы