Javascript 使用json和函数搜索填充级联下拉列表
这是有史以来最令人沮丧的在线搜索答案或解决方案之一！我还没有找到任何可以完成这项基本任务的东西——尽管如此，这是一个在网络上经常使用的搜索工具。。。因此，令人惊讶的是，为什么没有很多（任何）可供销售的演示/脚本可以做到这一点 我想在我的网站上有一个搜索工具，用户可以选择一个国家>省>镇（3个下拉列表） 显然，如果用户选择美国（例如），下一个下拉列表将填充/更新与美国相关的省份（州），以此类推 我看到很多人使用ASP.net和AngularJS来执行此功能，但我不使用这两种语言，也不想使用它们 这家伙为那些希望在下拉列表中选择项目时动态加载结果的人开发了一个很棒的解决方案，但是这不是我想要的 Javascript和Json方法是我喜欢的方向。 现在，这个家伙为填充下拉列表提供了一个很好/简单的解决方案（稍后我将发布此脚本的代码） 但是，由于所有这些演示和脚本都在线，它们都缺少一件事——搜索功能。填充下拉列表以选择正确的项目非常好，但这只是完成工作的一半，仅此而已 我希望用户能够在选择下拉列表中的最后一项后单击搜索按钮，并转到相应的页面（因为这不是应该用于的吗？-当然这也取决于手头的项目） 让我们看看第二个链接中的家伙创建的填充下拉列表的代码： HTML:Javascript 使用json和函数搜索填充级联下拉列表,javascript,jquery,json,Javascript,Jquery,Json,这是有史以来最令人沮丧的在线搜索答案或解决方案之一！我还没有找到任何可以完成这项基本任务的东西——尽管如此，这是一个在网络上经常使用的搜索工具。。。因此，令人惊讶的是，为什么没有很多（任何）可供销售的演示/脚本可以做到这一点 我想在我的网站上有一个搜索工具，用户可以选择一个国家>省>镇（3个下拉列表） 显然，如果用户选择美国（例如），下一个下拉列表将填充/更新与美国相关的省份（州），以此类推 我看到很多人使用ASP.net和AngularJS来执行此功能，但我不使用这两种语言，也不想使用它们 这
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<script src="js/jquery-1.8.1.min.js"></script>
<script src="js/outils.js"></script>
</head>
<body>
<div>
<select id="Marque">
<option value="0">Choix du marque</option>
<option value="bmw">bmw</option>
<option value="mercedes">mercedes</option>
<option value="audi">audi</option>
<option value="volswagen">volswagen</option>
</select>
<select id="Serie"></select>
</div>
</body>
jQuery().ready(function(){
var tabMarque=[];
$.getJSON('file.json', function(data) {
$.each(data, function(index, val) {
tabMarque[index]=val;
});
});
$('#Marque').change(function(event) {
$marque=$(this).val();
$htmlOption='<option value="0">Choix du serie</option>';
if($marque!=0)
{
$.each(tabMarque[$marque], function(key, value) {
$htmlOption+='<option
value="'+value[0]+'">'+value[1]+'</option>';
});
}
$('#Serie').html($htmlOption);
});
});
{
"bmw":[
["1","serie 1"],
["2","serie 3"],
["3","serie 5"],
["4","serie 7"]
],
"mercedes":[
["6","class A"],
["7","class B"],
["8","class C"],
["9","class E"]
],
"audi":[
["10","a3"],
["11","a4"],
["12","a5"],
["13","a6"]
],
"volswagen":[
["14","polo"],
["15","golf"],
["16","cady"]
]
}
"bmw":[
["1","serie 1","http://www.example.com/bmw-1-series.htm"],
["2","serie 3","http://www.example.com/bmw-2-series.htm"],
["3","serie 5","http://www.example.com/bmw-3-series.htm"],
["4","serie 7","http://www.example.com/bmw-4-series.htm"]
],
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<script src="js/jquery-1.8.1.min.js"></script>
<script src="js/outils.js"></script>
</head>
<body>
<div>
<select id="Marque">
<option value="0">Choix du marque</option>
<option value="bmw">bmw</option>
<option value="mercedes">mercedes</option>
<option value="audi">audi</option>
<option value="volswagen">volswagen</option>
</select>
<select id="Serie"></select>
</div>
</body>
jQuery().ready(function(){
var tabMarque=[];
$.getJSON('file.json', function(data) {
$.each(data, function(index, val) {
tabMarque[index]=val;
});
});
$('#Marque').change(function(event) {
$marque=$(this).val();
$htmlOption='<option value="0">Choix du serie</option>';
if($marque!=0)
{
$.each(tabMarque[$marque], function(key, value) {
$htmlOption+='<option
value="'+value[0]+'">'+value[1]+'</option>';
});
}
$('#Serie').html($htmlOption);
});
});
{
"bmw":[
["1","serie 1"],
["2","serie 3"],
["3","serie 5"],
["4","serie 7"]
],
"mercedes":[
["6","class A"],
["7","class B"],
["8","class C"],
["9","class E"]
],
"audi":[
["10","a3"],
["11","a4"],
["12","a5"],
["13","a6"]
],
"volswagen":[
["14","polo"],
["15","golf"],
["16","cady"]
]
}
这就是我想要的（能够填充下拉列表-这是演示唯一要做的事情），但是如果用户想要搜索咖啡的。。。他们会点击饮料>然后选择咖啡，然后我希望他们能够点击一个按钮（就在两个下拉菜单下面）说搜索。。。这将把他们带到一个页面，上面列出了所有的咖啡。这个解决方案对我来说很有用： JAVASCRIPT:
$(document).ready(function(){
var tabMarque=[];
$.getJSON('file.data.txt', function (data) {
alert(data);
$.each(data, function(index, val) {
tabMarque[index]=val;
});
});
$('#Marque').change(function(event) {
alert('Marque_change');
var marque=$(this).val();
alert(marque);
var htmlOption='<option value="0">Choix du serie</option>';
if(marque!="0")
{
var itemsMarque = tabMarque[marque];
alert(JSON.stringify(itemsMarque));
$.each(itemsMarque, function (key, value) {
//alert("k=" + key + " v=" + JSON.stringify(value));
htmlOption+='<option value="'+value[0]+'" data-href="'+value[2]+'">'+value[1]+'</option>';
});
}
$('#Serie').html(htmlOption);
});
$('#go').click(function () {
alert('go_click');
var selected = $('#Serie').find('option:selected');
var href = selected.data('href');
alert('goto:'+href);
});
按照您的要求，我查看了代码并更正了它。可在以下网址找到： 在StackOverflow中，只链接的答案是不受欢迎的，因此我将再写一点： 正如我在最初的评论中所写：
如果您一般都在关注您发布的视频，那么 应该能够以此为基础。你可以做两件事中的一件 使用链接，或者维护自己的数据结构（甚至是 基本对象）在叶节点选择项的值之间进行映射 然后导航到目的地，或者直接将其作为数据添加 属性将其添加到菜单时。然后你的按钮代码就可以了 在您放置的任何位置查找URL。在他的第15行中（在 “marque”处理程序）您可以：
$htmlOption+=”那么你的实际问题是什么？如何添加搜索按钮，并使其根据下拉选择的状态动态显示/隐藏或禁用/启用？您的问题标题为“填充级联下拉列表”，但这似乎不是您真正要问的问题？使用函数搜索。。。这是我的问题。。。我希望所选项目是可搜索的。我不知道如何更好地解释我所问的问题，“功能搜索”是指“工作搜索能力”吗？您是在尝试在下拉列表中填充的内容中搜索，还是我们只是在讨论“搜索”按钮，在您的示例中，该按钮将跳转到bmw-1-series.htm
？这不是一个搜索；它更接近于一个基本的导航菜单。是的，它更接近于一个基本的导航菜单，但是区别在于你从json文件中提取数据，否则如果我把所有的选项和链接放在一个典型的导航中，然后，Nav将是非常长的填充有不利于用户的链接，SEOIf，你一般跟随随着你张贴的视频，你应该能够使用它作为基础。您可以使用链接执行以下两种操作之一：维护自己的数据结构（甚至是基本对象）以在叶节点选择项的值
和导航目的地之间映射，或者在将它们添加到菜单时直接将其添加为数据属性。然后，您的按钮代码可以在您放置的任何位置查找URL。在他的第15行（在“marque”处理程序中），您可以使用$htmlOption+='感谢buddy提供的代码-我非常感谢！我已经测试过了，第二个下拉框没有加载任何项目（它是空白的）。我必须在服务器上实时测试它才能工作吗？另外，我在javascript中看到：$.getJSON（'file.data.txt'，function（data）{…json代码必须在.txt文件而不是.json中吗？该文件包含json d