2016-04-04 26 views
0

'a göre getJSON için yükleme URL'si jquery için yeniyim ve seçili seçeneğe dayalı getJSON işlevine url yüklemek için istiyorum, daha sonra json verilerini bir tabloya yükleyin. folder/json

Mesela: select (seçenek) menüsündeki katipliği seçersem, url'nin "json/clerk.json" olmasını istiyorum.
Bu kod doğru değil, ancak getJson tamam, değişken kapsam sorunu olan değişken URL boş kalır.

Temelde İşte jquery var şimdiye kadar denedim:

Seçeneği

$(document).ready(function() { 
 
     var url = null; //url for the getJson function 
 
    function employeeType() 
 
    { 
 
     $('#user').change(function() { 
 
     /* setting currently changed option value to option variable */ 
 
     var option = $(this).find('option:selected').val(); 
 
     console.log(option); 
 
     switch (option) { 
 
      case "accountant": 
 
      url = "json/accountant.json"; 
 
      return url; 
 
      break; 
 
      case "clerk": 
 
      url = "json/clerk.json"; 
 
      return url; 
 
      break; 
 
      case "admin": 
 
      url = "json/administration.json"; 
 
      return url; 
 
      break; 
 
      default: 
 
      url = "null"; 
 
      return url; 
 
      break; 
 
     } 
 
     }); 
 
    } 
 
     url = employeeType(); 
 
     console.log(url); //the url here is null 
 
     //this is working url = "json/administration.json"; 
 

 
     $.getJSON(url, function(data) { 
 
      //table to load json file 
 
      var table = $('#myTable tbody'); 
 
      //loop through the json file 
 
      $.each(data, function(key, value) { 
 
       console.log(key + " : " + value); 
 
       if (key == "ict-skills") { 
 
        var ictRow = '<tr class="info"><td colspan="3"><label>ii) ICT Skills</label></td></tr>'; 
 
        table.append(ictRow); 
 
        $.each(value, function(key1, value1) { 
 
        for (k in value1) { 
 
         // console.log(key1 + ':' + k + ':' + value1[k]); 
 
         var row = '<tr><td>' + value1[k] + 
 
         '</td><td class="check"><input type="checkbox" class="styled " name="ict[' + k + ']" value="possess"/>' + 
 
         '</td><td class="check"><input type="checkbox" class="styled" name="ict[' + k + ']" value="train"/></td>' + 
 
         '</tr>'; 
 
         //console.log(row); 
 
         table.append(row); 
 
        } 
 

 
        }); 
 
       } 
 
       } 
 
      });

seçme html geçerli:

<div class="form-group"> 
    <label class="col-sm-2 control-label">Employee ID</label> 
    <div class="col-sm-2"> 
    <input type="text" class="form-control" name="id_no"> 
    </div> 
    <label class="col-sm-2 control-label">Employee Type</label> 
    <div class="col-sm-2"> 
    <select class="form-control" name="user" id="user"> 
     <option value=""></option> 
     <option value="accountant">Accountant</option> 
     <option value="admin">Administration</option> 
     <option value="clerk">Clerk</option> 
    </select> 
    </div> 
</div> 
+0

sizin console.log (isteğe bağlı) bu noktada size doğru değeri veren var mı? Yani bir "muhasebeci" dizesi –

+0

evet @OliverM bile switch.Con (url) anahtar deyiminin içinde tamam. – Cheruiyot

cevap

1

bir kapsam sorunu gibi görünüyor, denemek Aşağıda (breja için ajax çağrı kaldırıldı ty):

var employeeType = function (option) { 
    /* setting currently changed option value to option variable */ 
    switch (option) { 
     case "accountant": 
     url = "json/accountant.json"; 
     return url; 
     break; 
     case "clerk": 
     url = "json/clerk.json"; 
     return url; 
     break; 
     case "admin": 
     url = "json/administration.json"; 
     return url; 
     break; 
     default: 
     url = "null"; 
     return url; 
     break; 
    }}; 

    $('#user').change(function(){ 
    var option = $(this).find('option:selected').val(); 
    url = employeeType(option); 
    alert(url); 
    }); 

Düzenleme: Fiddle ->https://jsfiddle.net/54y171u9/