選択オプションの値に基づいてgetJSONのURLをロードする

Question

jqueryを初めて使用しました。は、選択したオプションに基づいてgetJSON関数にURLをロードし、jsonデータをテーブルにロードします。フォルダ/ json

例：selectオプションメニューで店員を選択すると、URLは "json/clerk.json"になります。
このコードは正しくありませんが、getJsonは変数urlがnullのままになっていても問題ありません。これは可変スコープの問題です。

は基本的にここでjQueryのこれまでに試してみました：

$(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); 
 
        } 
 

 
        }); 
 
       } 
 
       } 
 
      });

選択のためのHTMLは次のとおりです。

<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> 

Answer 1

は、スコープの問題をしているようだ、してみてください以下（あなたのajaxコールを削除brevi 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); 
    }); 

編集：フィドル - >https://jsfiddle.net/54y171u9/