gpt4 book ai didi

jquery - Json 下拉列表

转载 作者:行者123 更新时间:2023-12-01 01:38:24 26 4
gpt4 key购买 nike

当我点击要安装主题的部门时,当我点击主题时要安装的服务。但当我点击服务时却没有看到问题。我认为对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>

最佳答案

我编辑了你的代码,现在它可以工作了(通过在 fiddle 中选择第一个“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/

关于jquery - Json 下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7213892/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com