gpt4 book ai didi

javascript - 如何使用 jquery + ajax 制作多个依赖下拉列表

转载 作者:行者123 更新时间:2023-11-29 10:50:47 24 4
gpt4 key购买 nike

我正在尝试构建一个页面,用户可以在其中互相提供工作表。

我正在尝试使用依赖下拉菜单来做到这一点。不确定这是否是正确的术语,所以我将提供一个示例。

集合分类大致如下:类型 > 类别 > 主题 > 工作表

我的大致思路是:

  1. 页面加载类型的 json 并显示类型下拉列表
  2. 用户将数学、科学、英语视为类型并选择数学
  3. Page 使用 ajax 查询数据库并使用 1、2、3 等级别填充 Topics。
  4. 用户选择 4 级
  5. 页面使用 ajax 查询数据库并填充适当的 4 年级主题
  6. ...等等,直到链的底部

在 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>

这适用于选择类型并加载类别的显示,但是一旦我选择了类别,就没有任何反应。另外,如果有人能指出我在网络世界中所谓的东西,我将非常感激。动态依赖下拉菜单没有那么有用,我不确定还能调用它什么。

最佳答案

您的代码不必要地依赖于 jQuery,并且没有有效地重用代码。此解决方案可能需要对您的服务器端代码进行细微的重写,但无论如何都应该更加抽象。尝试更像这样的东西:

<html>
<body>
<select id="type" onchange="updateNext(this, 'category')">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
<select id="category" onchange="updateNext(this, 'topic')">
</select>
<select id="topic" onchange="updateNext(this, 'worksheet')">
</select>
<script>
function updateNext(el, nextName) {
var url_arg = el.value;
var full_url = "base_url/json_get_wstopics_by_category/" + url_arg;
var options, txtStrng;
//grab ajax data
$.ajax({
async: false,
url: full_url,
type: 'POST',
dataType: 'json',
success: function(output_string){
options= output_string;
}
});
//create the option list
$.each( options, function() {
txtStrng += "<option value=\"" + this.option_id.toString() + "\">";
txtStrng += this.option_name.toString();
txtStrng += "</option>";
});
//clear the option list
$('#'+nextName).text('');
//attach the option list
$(txtStrng).appendTo('#'+nextName);
}
</script>

关于javascript - 如何使用 jquery + ajax 制作多个依赖下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10644541/

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