今すぐコードに。
これはあなたの "index.htmlを" コードです：これはあなたの "あるmain.css" のコードである
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="js/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Dynamic Selects</title>
</head>
<body>
<div id="data"></div><!-- we will load the data JSON string here //-->
<div id="wrapper">
<div id="boxes">
<select name="language" id="language" class="select">
<option value="0" disabled="disabled" selected="selected">Select Language</option>
</select>
<select name="status" id="status" class="select">
<option value="0" disabled="disabled" selected="selected">Select Status</option>
</select>
<select name="file" id="file" class="select">
<option value="0" disabled="disabled" selected="selected">Select Files</option>
</select>
</div>
</div>
</body>
：
body, html {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
background-color: #ddd;
}
#wrapper {
width: 100%;
height: 100%;
}
#boxes {
width: 500px;
margin: 0 auto;
padding: 100px 0px;
}
.select {
width: 160px;
height: 20px;
background-color: #ddd;
}
#data {
display: none;
}
.highlighted {
border: 1px solid red;
}
これはあなたの "data.js" でありますコード：
var dataObject = {
"EN": {
"title": "English EN",
"status":
[{
"title": "Answered"
,"questions":
[
{"q1":"Question 1"}
,{"q2":"Question 2"}
,{"q3":"Question 3"}
,{"q4":"Question 4"}
]
},
{
"title": "Closed"
,"questions":
[
{"q5":"Question 5"}
,{"q6":"Question 6"}
,{"q7":"Question 7"}
,{"q8":"Question 8"}
]
},
{
"title": "Escalated"
,"questions":
[
{"q9":"Question 9"}
,{"q10":"Question 10"}
,{"q11":"Question 11"}
,{"q12":"Question 12"}
]
}]
},
"DA": {
"title": "Danish DA",
"status":
[{
"title": "Answered DA"
,"questions":
[
{"qda1":"Question DA 1"}
,{"qda2":"Question DA 2"}
,{"qda3":"Question DA 3"}
,{"qda4":"Question DA 4"}
]
},
{
"title": "Closed DA"
,"questions":
[
{"qda5":"Question DA 5"}
,{"qda6":"Question DA 6"}
,{"qda7":"Question DA 7"}
,{"qda8":"Question DA 8"}
]
},
{
"title": "Escalated DA"
,"questions":
[
{"qda9":"Question DA 9"}
,{"qda10":"Question DA 10"}
,{"qda11":"Question DA 11"}
,{"qda12":"Question DA 12"}
]
}]
}
};
最後に、thちょうどあなたのブラウザで「index.htmlを」ファイルにナビゲートしたり、ローカル/リモートのWebサーバー上でそれを使用して結果を参照してください、今すぐ
var url = 'js/data.js'; // URL to data file. could be full or relative
// Select box names (ids)
var langSelect = 'language';
var statusSelect = 'status';
var questionSelect = 'file';
// Load the data object externally
$.getScript(url,function(){});
// on document load, do whatever you need
$(document).ready(function() {
});
$(document).ajaxComplete(function(r){
// fire when any Ajax requests complete (we get our data from server)
dMgr.populateLang();
})
// data manager object. using: dMgr.functionName(); <-- will populate the linked select box with chosen data.
var dMgr = {
// function to populate language select with data
populateLang: function() {
// if dataObject from server is empty, return nothing
if (!typeof(dataObject) == 'object') return false;
// create select options string with its current content <only first one> (the "select language.." option)
var langs = '<option value="">'+$('#'+langSelect+' option:first').html()+'</option>';
// loop dataObject and get it's keys as language values and title as option title
for(i in dataObject) {
// combine it to existing string
langs += '<option value="'+i+'">'+dataObject[i].title+'</option>';
};
// populate our select with newly received data and by using chain, bind "onChange" event to it:
$('#'+langSelect).html(langs).change(function() {
// if selected the empty row, die.
if (!$(this).val()) return false;
// remove high light CSS class from the active select box
$('#'+langSelect).removeClass('highlighted');
var val = $(this).val(); // value we got from selected option, f.e: "EN" (English EN)
// populate status select
dMgr.populateStatus(val); // passing the selected language
// if we change language, make sure we empty the last select - questions
// we pass only third argument as true which means - yes, erase the data
dMgr.populateQuestions(false,false,true);
}).addClass('highlighted'); // high light the active select box with CSS class
},
populateStatus: function(lang) {
// if no language passed, die.
if (!lang) return false;
// if there's no status for select language - die.
if (dataObject[lang].status.length <= 0) return false;
// just a shortcut to the object statuses
var sObj = dataObject[lang].status;
// create select options string with its current content <only first one> (the "select status.." option)
var statuses = '<option value="">'+$('#'+statusSelect+' option:first').html()+'</option>';
// loop through all statuses and get their titles and values for new options
for(i in sObj) {
statuses += '<option value="'+i+'">'+sObj[i].title+'</option>';
};
// populate our select with newly received data and by using chain, bind "onChange" event to it:
$('#'+statusSelect).html(statuses).change(function() {
// if selected the empty row, die.
if (!$(this).val()) return false;
// remove high light CSS class from the active select box
$('#'+statusSelect).removeClass('highlighted');
var val = $(this).val(); // value we got from selected option, f.e: "1" (Answered)
// populate status select
dMgr.populateQuestions(lang, val); // passing the selected language
}).addClass('highlighted'); // high light the active select box with CSS class
},
populateQuestions: function(lang, status, eraseData) {
if ((!lang || !status) && !eraseData) return false;
// We do this actions before checking everything else, as there might be eraseData option
// create select options string with its current content <only first one> (the "select question.." option)
var questions = '<option value="">'+$('#'+questionSelect+' option:first').html()+'</option>';
// If we just erasing the data, then put what we already harvested back and stop.
if (eraseData) {
$('#'+questionSelect).html(questions);
return true;
};
// if there's no status for select language - die.
if (dataObject[lang].status[status].questions.length <= 0) return false;
// shortcut to the questions
var sObj = dataObject[lang].status[status].questions;
// loop through all statuses and get their titles and values for new options
for(i in sObj) {
for(key in sObj[i]) {
questions += '<option value="'+key+'">'+sObj[i][key]+'</option>';
};
};
// populate our select with newly received data and by using chain, bind "onChange" event to it:
$('#'+questionSelect).html(questions).change(function() {
// if selected the empty row, die.
if (!$(this).val()) return false;
// remove high light CSS class from the active select box
$('#'+questionSelect).removeClass('highlighted');
var val = $(this).val(); // value we got from selected option, f.e: "1" (Answered)
/*
* Do whatever you want here. "val" in this scope is the latest value selected (question)
* Either build more selects, or do AJAX call, or change page context.
*/
alert('You\'ve reached the last select option and selected it, what should I do now?');
}).addClass('highlighted'); // high light the active select box with CSS class
}
};
：E全体の機能は、これはあなたの「main.js」ファイルであります：p
ボラ！