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')，这应该工作，我认为。