Json下拉列表

Question

當我點擊部門安裝主題時，點擊主題時要安裝的服務。但事情並沒有看到我點擊服務時。我認爲描述json是不準確的。你能幫我解決這個問題嗎？謝謝。 我的jquery代碼;

/* <![CDATA[ */ 

(function($) { 

$.fn.changeType = function(){ 

    var data = [ 
     { 
     "department": "IT", 
     "subject": [ 
       {"title":"Programmer", 
         "services" :[ 
         {"name":"example1"}, 
         {"name":"example2"} 
            ] 

       }, 
       {"title":"Solutions Architect"}, 
       {"title":"Database Developer"} 
       ] 
     }, 
     {"department": "Accounting", 
     "subject": [ 
       {"title":"Accountant"}, 
       {"title":"Payroll Officer"}, 
       {"title":"Accounts Clerk"}, 
       {"title":"Analyst"}, 
       {"title":"Financial Controller"} 
       ] 
     }, 
     { 
     "department": "HR", 
     "subject": [ 
       {"title":"Recruitment Consultant"}, 
       {"title":"Change Management"}, 
       {"title":"Industrial Relations"} 
       ] 
     }, 
     { 
     "department": "Marketing", 
     "subject": [ 
       {"title":"Market Researcher"}, 
       {"title":"Marketing Manager"}, 
       {"title":"Marketing Co-ordinator"} 
       ] 
     } 
     ] 

     var options_departments = '<option>Select<\/option>'; 
     $.each(data, function(i,d){ 
      options_departments += '<option value="' + d.department + '">' + d.department + '<\/option>'; 
     }); 
     $("select#departments", this).html(options_departments); 

     $("select#departments", this).change(function(){ 
      var index = $(this).get(0).selectedIndex; 
      var d = data[index-1]; // -1 because index 0 is for empty 'Select' option 
      var options = ''; 
      if (index > 0) { 
       $.each(d.subject, function(i,j){ 
          options += '<option value="' + j.title + '">' + j.title + '<\/option>'; 
       }); 
      } else { 
       options += '<option>Select<\/option>'; 
      } 
      $("select#subject").html(options); 
     }) 
}; 


     $("select#subject", this).change(function(){ 
      var index = $(this).get(0).selectedIndex; 
      var j = data[index-1]; // -1 because index 0 is for empty 'Select' option 
      var options = ''; 
      if (index > 0) { 
       $.each(j.services, function(i,b){ 
          options += '<option value="' + b.name + '">' + b.name + '<\/option>'; 
       }); 
      } else { 
       options += '<option>Select<\/option>'; 
      } 
      $("select#services").html(options); 
     }) 




})(jQuery); 

$(document).ready(function() { 
    $("form#search").changeType(); 
}); 

/* ]]> */ 

我的html代碼;

<form id="search" action="" name="search"> 
    <select name="departments" id="departments"> 
     <option>Select</option> 
    </select> 

    <select name="subject" id="subject"> 
     <option>Select</option> 
    </select> 

    <select name="services" id="services"> 
     <option>Select</option> 
    </select> 

</form> 

Answer 1

我編輯你的代碼，現在它的工作原理（通過選擇第一個「IT」，然後選擇小提琴中的「程序員」）。當然，如果沒有「服務」，則第三項選擇中不會顯示任何內容。 你應該增加一些邏輯，以便它顯示了第三隻如果有涉及到你的主題

(function($) { 


    var data = [ 
     { 
     "department": "IT", 
     "subject": [ 
      { 
      "title": "Programmer", 
      "services": [ 
       { 
       "name": "example1"}, 
      { 
       "name": "example2"} 
          ] 

      }, 
     { 
      "title": "Solutions Architect"}, 
     { 
      "title": "Database Developer"} 
     ]}, 
    { 
     "department": "Accounting", 
     "subject": [ 
      { 
      "title": "Accountant"}, 
     { 
      "title": "Payroll Officer"}, 
     { 
      "title": "Accounts Clerk"}, 
     { 
      "title": "Analyst"}, 
     { 
      "title": "Financial Controller"} 
     ]}, 
    { 
     "department": "HR", 
     "subject": [ 
      { 
      "title": "Recruitment Consultant"}, 
     { 
      "title": "Change Management"}, 
     { 
      "title": "Industrial Relations"} 
     ]}, 
    { 
     "department": "Marketing", 
     "subject": [ 
      { 
      "title": "Market Researcher"}, 
     { 
      "title": "Marketing Manager"}, 
     { 
      "title": "Marketing Co-ordinator"} 
     ]} 
    ] 
    var selectedDepartment, selectedSubject; 

    $.fn.changeType = function() { 

     var options_departments = '<option>Select<\/option>'; 
     $.each(data, function(i, d) { 
      options_departments += '<option value="' + d.department + '">' + d.department + '<\/option>'; 
     }); 
     $("select#departments", this).html(options_departments); 

     $("select#departments").change(function() { 
      var index = $(this).get(0).selectedIndex; 

      var d = data[index - 1]; // -1 because index 0 is for empty 'Select' option 
      selectedDepartment = d; 
      var options = ''; 
      if (index > 0) { 
       options += '<option>Select<\/option>'; 
       $.each(d.subject, function(i, j) { 
        options += '<option value="' + j.title + '">' + j.title + '<\/option>'; 
       }); 
      } else { 
       options += '<option>Select<\/option>'; 
      } 
      $("select#subject").html(options); 
     }) 
    }; 


    $("select#subject").change(function() { 
     var index = $(this).get(0).selectedIndex; 
     selectedSubject = selectedDepartment.subject[index -1]; 
     var options = ''; 
     if (index > 0) { 
      $.each(selectedSubject.services, function(i, b) { 
       options += '<option value="' + b.name + '">' + b.name + '<\/option>'; 
      }); 
     } else { 
      options += '<option>Select<\/option>'; 
     } 
     $("select#services").html(options); 
    }) 




})(jQuery); 

$(document).ready(function() { 
    $("form#search").changeType(); 
}); 

小提琴這裏的服務選擇：

http://jsfiddle.net/fF38L/

編輯 - 使其工作在IE8起飛的console.log（）

http://jsfiddle.net/fF38L/1/

Answer 2

嘗試var data = eval('your json-string')，這應該工作，我認爲。