我正在尝试构建一个页面,用户可以在其中互相提供工作表。
我正在尝试使用依赖下拉菜单来做到这一点。不确定这是否是正确的术语,所以我将提供一个示例。
大致设置的分类如下:类型 > 类别 > 主题 > 表格
大致我的想法是:
- 页面为类型加载 json 并显示类型下拉列表
- 用户将数学、科学、英语视为类型并选择数学
- 页面使用 ajax 查询数据库并填充 1、2、3 等的主题。
- 用户选择等级 4
- 页面使用 ajax 查询数据库并填充适当的 4 年级主题
- ...依此类推,直到链的底部
在 JavaScript 部分:
<script type="text/javascript" language="javascript">
var types;
var categories;
var topics;
var sheets;
//load the first types
$(document).ready(function(){
$.ajax({
async: false,
url: "base_url/json_get_all_wstypes",
type: 'POST',
dataType: 'json',
success: function(output_string){
types = output_string;
}
});
});
//by default - intialize types
$(document).ready(function(){
var t_choices = "<select name=\"type_id\" id=\"type_picker\" >";
t_choices += "<option value=\"\" selected=\"selected\">Select a Type</option>";
$.each(types, function(){
t_choices += "<option value=\"" + this.type_id.toString() + "\">";
t_choices += this.type_name.toString();
t_choices += "</option>";
});
t_choices += "</select>";
$('#type_choices').text('');
$(t_choices).appendTo('#type_choices');
});
//reaction to picking a type
$(document).ready(function(){
$('#type_picker').change(function(){
var url_arg = $('#type_picker').val().toString();
var full_url = "base_url/json_get_wscategories_by_type/" + url_arg;
$.ajax({
async: false,
url: full_url,
type: 'POST',
dataType: 'json',
success: function(output_string){
categories = output_string;
}
});
var choices = "<select name=\"category_id\" id=\"category_picker\" >";
choices += "<option value=\"\" selected=\"selected\">Select a category</option>";
$.each( categories, function() {
choices += "<option value=\"" + this.category_id.toString() + "\">";
choices += this.category_name.toString();
choices += "</option>";
});
choices += "</select>";
alert(choices.toString());
$('#category_choices').text('');
$(choices).appendTo('#category_choices');
});
});
//reaction to picking a category (initialize topic)
$(document).ready(function(){
$('#category_picker').change(function(){
var url_arg = $('#category_picker').val().toString();
var full_url = "base_url/json_get_wstopics_by_category/" + url_arg;
$.ajax({
async: false,
url: full_url,
type: 'POST',
dataType: 'json',
success: function(output_string){
topics = output_string;
}
});
var choices = "<select name=\"topic_id\" id=\"topic_picker\" >";
choices += "<option value=\"\" selected=\"selected\">Topic a category</option>";
$.each( topics, function() {
choices += "<option value=\"" + this.topic_id.toString() + "\">";
choices += this.topic_name.toString();
choices += "</option>";
});
choices += "</select>";
alert(choices.toString());
$('#topic_choices').text('');
$(choices).appendTo('#topic_choices');
});
});
//reaction to picking a topic (initialize sheet)
similar code pattern as method before it...
//reaction to picking a sheet (intialize page)
similar code pattern as the method before...
</script>
在网络表单部分:
<p>
<label for="type_id">Pick a sheet type:</label>
<div id="type_choices">
</div>
</p>
<p>
<label for="categories_id">Pick a category:</label>
<div id="category_choices">
</div>
</p>
<p>
<label for="topic_id">Pick a topic:</label>
<div id="topic_choices">
</div>
</p>
<p>
<label for="worksheet_id">Pick a worksheet:</label>
<div id="sheet_choices">
Please select a topic first to activate this section
</div>
</p>
这适用于选择类型并加载类别的显示,但是一旦我选择类别,什么都不会发生。另外,如果有人能指出网络世界中所谓的内容,我将不胜感激。动态相关下拉菜单没有那么有用,我不知道还能叫什么。