使用jQuery和XML创建链接的下拉列表
介绍 本文将创建一个链式下拉菜单，我们希望在其中表示来自分层数据集的数据。在这里，我将讨论使用客户端jQuery脚本填充服务器端HTML下拉列表的方法。我的数据库是一个简单的XML数据文件。jQuery通过调用AJAX为XML数据文件提供了具体的支持。使用jQuery的AJAX调用响应速度快得多，并且为大多数ASP提供了最佳的支持。网络控制。 使用的代码 本文演示的程序使用了两个. js文件，第一个是从jquery网站下载的最新版本的jquery文件。另一个负责这个程序的工作(下拉列表.js)。 我的链式下拉菜单从关卡0开始进入到关卡2，但是关卡可以根据需要而定。在Level0下拉列表中的数据是由硬代码在page上指定的，两个项目' Cars '和' Bikes '。当用户选择“Cars”时，可用的“Cars”列表已经在Level1的下拉列表中被填充，对于“Bikes”也是一样的情况，可用的自行车列表出现并被填充。第三下拉列表在Level2填充的“品牌”可选择的汽车或自行车在Level1。整个工作是在'下拉列表中定义的两个函数中完成的。js文件。当用户单击页面上的按钮时，将调用同一文件中的另一个函数。此单击将从所有下拉列表中选择数据，并将其填充到页面上的一个分区中(例如Cars - >塔塔——比;纳米)。最初，带有按钮的下拉列表在级别1和级别2是禁用的。一旦级别1的列表被填充，它就被启用，当级别2的列表被填充时，按钮和这个列表都被启用。 有一个XML文件的马达。这个文件存储了我们所有的数据。当我们需要在motoc>中填写“Cars”数据时对于“自行车”<motob>，对于“汽车品牌”<motocb>，以及“自行车品牌”<motobb>的节点。 我在页面上使用的四个元素的id是:drpMain(水平0的下拉列表)，drpMoto(水平1的下拉列表)，drpBrand(水平2的下拉列表)和btnGo(点击按钮)。所以当我写关于drpMain，那是下拉列表在Level0，反之亦然。 下拉列表中的第一个jQuery函数。js负责在Level1填充列表的文件如下(该函数在‘drpMain’的‘onchange’事件中被调用): 隐藏,收缩,复制Code
$.fillM = function()
{
$('#drpMoto option').remove();
$('#drpBrand option').remove();
$('#drpMoto').attr('disabled',true);
$('#drpBrand').attr('disabled',true);
$('#btnGo').attr('disabled',true);
if($('#drpMain').val() != "0")
{
if($('#drpMain').val() == "1")
{
$.ajax({
type: "GET",
url: "XMLFiles/Motors.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('motoc').each(function(){
$('#drpMoto').append($('<option></option>').val
($(this).attr('mcid')).html($(this).attr('mcname')));
});
}
});
}
else if($('#drpMain').val() == "2")
{
$.ajax({
type: "GET",
url: "XMLFiles/Motors.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('motob').each(function(){
$('#drpMoto').append($('<option></option>').val
($(this).attr('mbid')).html($(this).attr('mbname')));
});
}
});
}
$('#drpMoto').removeAttr('disabled');
}
}
当‘drpMain’的选择发生变化时，‘drpMoto’和‘drpBrand’中的选项已经被移动，这两个带有按钮的列表都将被禁用。这已经在上述函数的前5行中完成了。 在第六行有一个条件，这里程序检查已经选择的值，如果发现非零，这意味着除了默认选择已经被选择和控制进入条件块。否则，控件将在不启用任何禁用元素的情况下从函数中退出。 在条件块中，已经检查了所选值是1 (for ' Cars ')还是2 (for ' Bikes ')。然后执行了对Motor.xml的AJAX调用，节点以motoc>开始。已为选择的值1或以<motob>开头的节点提取。已为所选值2提取。提取的节点的数据现在已经填充到“drpMoto”(第1级的下拉列表)中，并启用了“drpMoto”进行选择。 下拉列表中的第二个jQuery函数。js负责在第2级填充列表的文件如下(该函数在' drpMoto '的' onchange '事件中被调用): 隐藏,收缩,复制Code
$.fillS = function()
{
$('#drpBrand option').remove();
$('#drpBrand').attr('disabled',true);
$('#btnGo').attr('disabled',true);
if($('#drpMoto').val() != "0")
{
if($('#drpMain').val() == "1")
{
$.ajax({
type: "GET",
url: "XMLFiles/Motors.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('motocb').each(function(){
if($(this).attr('mcid') == $('#drpMoto').val())
$('#drpBrand').append($('<option></option>').val
($(this).attr('mcbid')).html($(this).attr('mcbname')));
});
}
});
}
else if($('#drpMain').val() == "2")
{
$.ajax({
type: "GET",
url: "XMLFiles/Motors.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('motobb').each(function(){
if($(this).attr('mbid') == $('#drpMoto').val())
$('#drpBrand').append($('<option></option>').val
($(this).attr('mbbid')).html($(this).attr('mbbname')));
});
}
});
}
$('#drpBrand').removeAttr('disabled');
$('#btnGo').removeAttr('disabled');
}
}
当“drpMoto”的选择发生变化时，“drpBrand”中的选项已被删除，“drpBrand”带有按钮的选项将被禁用。这已经在上述函数的前三行中完成了。 在第4行有一个条件，这里程序检查已经选择的值，如果发现非零，意味着除了默认选择已经被选择和控制进入条件块。否则，控件将在不启用任何禁用元素的情况下从函数中退出。 在条件块中，已经检查了在' drpMain '上选择的值是1(对于' Cars ')还是2(对于' Bikes ')。然后执行了对Motor.xml的AJAX调用，节点以<motocb>开始。已为所选的值1或以<motobb>开始的节点提取。已为所选值2提取。从节点提取的数据现在已经被过滤为选择的汽车或自行车，然后填写' drpBrand '(在第2级的下拉列表)和' drpBrand '和按钮被启用。 在这个功能的一个额外的事情是过滤品牌数据为选择的汽车或自行车。这类似于我们在SQL/Oracle中使用外键。其目的是为基本ta中的特定主值提取子表中的数据行祝福。但是这里没有外键，这是通过使用将基本元素的mcid/mbid与子元素匹配的条件来完成的。如果匹配，则填写' drpBrand '，否则忽略。 查看上述功能的这部分: 隐藏,复制Code
$(xml).find('motocb').each(function(){ if($(this).attr('mcid') == $('#drpMoto').val()) $('#drpBrand').append($('<option></option>').val ($(this).attr('mcbid')).html($(this).attr('mcbname'))); });
当循环进行时，每次在‘drpBrand’中填充数据之前都会检查一个条件。 现在，二级下拉列表可供选择和点击按钮。当用户单击该按钮时，所选结果将出现在页面的一个分区中。参见“下拉列表”中的第三个函数。js文件: 隐藏,复制Code
$.redP = function() { if($('#drpMain').val() != "0" && $('#drpMoto').val() != "0" && $('#drpBrand').val() != "0") $('#dResult').html("Searched for: " + $('#drpMain option:selected').text() + "-->" + $('#drpMoto option:selected').text() + "-->" + $('#drpBrand option:selected').text()); }
演示到此结束。 修正案 关于这篇文章，我有一个疑问。询问者争辩说，这个程序不与服务器端回发工作。这意味着当页面被发送回服务器时，所有的数据都会丢失。所有这一切的发生都是因为当我们通过客户端编程填充控件时缺少视图状态。但是我已经为它添加了一个解决方案，我使用cookie管理状态，在新上传的例子中又添加了一个cookie插件。js文件。要了解更多关于它，请阅读Dianal的查询和我的建议在下面的留言板。 点思考 实际的东西附加作为演示。当您看到下载文件时，您将很容易理解。如果您使用的是ASPX下拉列表，您可能会发现在向它们追加数据和收集选定值时存在困难。所以最好使用HTML选择控件，通过添加runat="server"使其服务器端。后者非常有效。您可能会对我写的另一篇文章感兴趣，这篇文章是关于使用服务器端编程做同样的事情(连锁下拉列表)的。您可以阅读使用AJAX和XML创建链式下拉列表。 最后的话 我希望这些东西对你有帮助。感谢你的阅读。好运！ 本文转载于：http://www.diyabc.com/frontweb/news285.html
