Json下拉列表 [英] Json Dropdown list
本文介绍了Json下拉列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我单击部门以安装主题时，单击主题时要安装的服务.但是，当我单击服务时，事情并没有看到.我认为描述json是不准确的.你能帮我这个忙吗?谢谢你. 我的Jquery代码；
When I click on the department to install the subject, the services to install when I click on the subject. But matters did not see when I click on services. I think it is inaccurate to describe the json. Can you help me with this. Thank you. My Jquery Code;
/* <![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>
推荐答案
我编辑了您的代码，现在它可以工作了(在小提琴中选择第一个"IT"然后选择"Programmer"进行检查).当然，如果没有服务"，则第三个选择中不会显示任何内容. 您应该向其中添加一些逻辑，以便仅在存在与您的主题相关的服务时才显示第三选择
I edited your code and now it works (check it by selecting the first "IT" then "Programmer" in the fiddle). Of course if there are no "Services" nothing is shown in the third select. You should add some logic to it so that it shows the third select only if there are services related to your subject
(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();
});
在这里拨弄
编辑-要使其在IE8上正常运行，请删除console.log()
EDIT - to make it work on IE8 take off the console.log()
这篇关于Json下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
