Json下拉列表

当我点击部门安装主题时，我点击主题时要安装的服务。 但是当我点击服务时，事情没有看到。 我认为描述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 = 'Select'; $.each(data, function(i,d){ options_departments += '' + d.department + ''; }); $("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 += '' + j.title + ''; }); } else { options += 'Select'; } $("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 += '' + b.name + ''; }); } else { options += 'Select'; } $("select#services").html(options); }) })(jQuery); $(document).ready(function() { $("form#search").changeType(); }); /* ]]> */ 

我的HTML代码;

 
  Select   Select   Select   

Answer 1

我编辑了你的代码，现在它可以工作了（通过选择第一个“IT”然后选择小提琴中的“Programmer”来检查它）。 当然，如果没有“服务”，则在第三个选择中不显示任何内容。 您应该为它添加一些逻辑，以便仅在有与您的主题相关的服务时才显示第三个选择

 (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 = 'Select<\/option>'; $.each(data, function(i, d) { options_departments += '' + 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 += 'Select<\/option>'; $.each(d.subject, function(i, j) { options += '' + j.title + '<\/option>'; }); } else { options += '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 += '' + b.name + '<\/option>'; }); } else { options += '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') ，我觉得应该可行。