Question

这是最令人沮丧的在线搜索解答或解决方案之一！而且我仍然没有找到任何可以执行这项基本任务的东西 - 据说，这是一个经常在网络上使用的搜索工具...所以它让人惊讶的是为什么没有'许多（任何）可以执行此操作的演示/脚本。

我想在我的网站上设置一个搜索工具，用户可以选择一个国家＆gt;省>镇（3次下降）。

显然，如果用户选择美国（例如），则下一个下拉列表将填充/更新与美国相关的省（州），然后下一个下拉列表。

我看到很多人使用ASP.net和AngularJS来执行此功能，但我既不使用这两种语言也不想使用它们。

这个人here为那些希望他们的结果在下拉列表中选择项目时动态加载的人开发了一个很好的解决方案 - 但是不是我想要的

Javascript和Json方法是我喜欢的地方。现在这个人 here 为填充下拉列表提供了一个很好/简单的解决方案（我将在稍后发布此脚本的代码）。

但是在这些演示和脚本的 ALL 在线，他们都缺少一件事 - 搜索工具。选择正确的项目是一个很棒的下拉菜单，但这只是完成工作的一半而且就是这样。

我希望用户能够在选择下拉列表中的最后一项之后单击搜索按钮并转到它的相应页面（因为这不是应该用于什么？ - 当然这也取决于手头的项目。）

因此，让我们在第二个链接中获取由该人创建的填充下拉列表的代码：

HTML：

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

使用Javascript：

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);
});
});

JSON：

{
"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"]
]
}

（对不起，我想把它放在JSfiddle上，但是涉及json，我不知道在哪里放json代码。）

所以在3个下拉框之后，我想要一个按钮“Go”或“Search”，一旦点击它就会将用户带到最后一个选定项目的页面。

EG（使用上面的示例代码 - 了解他的代码中只有2个下拉列表）：

我选择：

BMW

1系列

...然后当我点击“开始”时 - 它会带我去 bmw-1-series.htm

如何做到这一点？当然可以将URL添加到json文件中的项目，例如：

"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"]
 ],

然后当您点击“开始”时，它会转到相应的网址。显然，这需要额外的代码，我可以想象能够获取所选项目的URL并将用户带到该页面（我不知道该怎么做）？

有更好的方法吗？

更新以使这个更清晰：

转到CSS TRICKS DEMO

这就是我想要的（能够填充下拉菜单 - 这是演示中唯一的功能）但是如果用户想要搜索咖啡...他们会点击BEVERAGES＆gt;然后选择COFFEE然后我希望他们能够点击一个按钮（正好在2个下拉菜单下面）说SEARCH ...这将把他们带到一个页面上，所有的咖啡都列在

上

Answer 1

根据您的要求，我查看了代码并进行了更正。它可以在：

找到

http://plnkr.co/edit/RnCdfnrX0jy3RvmXjF56

在StackOverflow中，只有链接的答案是不受欢迎的，所以我会写一点：

正如我在原评论中写的那样：

如果您一般都关注您发布的视频，那么您应该能够以此为基础。你可以做两个中的一个与你的链接的东西，要么维护自己的数据结构（甚至是基本对象）在叶节点选择项的值之间进行映射然后导航目的地，或直接添加为数据将它们添加到菜单时的属性。然后你的按钮代码可以在您放置它的任何地方查找URL。在他的第15行（在 'marque'处理程序）你可以：

$htmlOption+='<option value="'+val[0]+'" data-theurl="'+val[2]+'"...'

如果网址在第2位

虽然C Fasolin接受了您指向的代码和我的建议，并试图将其转换为答案，但您在答案中提供的代码中存在错误是正确的。

由于SO需要Plunkr链接的代码，我现在也必须在这里粘贴一些代码。这是纠正后的JS代码减去注入代码的愚蠢数量的警报（我只是在Plunkr中注释掉了，但这里删除的更为整洁）。 HTML和JSON很好，也在Plunkr上。请注意，JSON数据仅包含BMW示例的URL，因此当您点击其他品牌的“go”时，您将获得404，ou marques，enfrançais。

$(document).ready(function() {
  var tabMarque = [];
  $.getJSON('data.json', function(data) {
    $.each(data, function(index, val) {
      tabMarque[index] = val;
    });
  });

  $('#Marque').change(function(event) {
    var marque = $(this).val();
    var htmlOption = '<option value="0">Choix du serie</option>';
    if (marque !== '0') {
      var itemsMarque = tabMarque[marque];
      $.each(itemsMarque, function(key, value) {
        htmlOption += '<option value="' + value[0] + '" data-href="' + value[2] + '">' + value[1] + '</option>';
      });
    }
    $('#Serie').html(htmlOption);
  });

  $('#go').click(function() {
    var selected = $('#Serie').find('option:selected');
    var href = selected.data('href');
    window.location = href;
  });
});

快乐的菜单！

Answer 2

这个解决方案对我有用：

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);
});

}）;

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
        <input type="button"  id="go" value="Go!" />
    </div>
</body>
</html>

JSON：

{
"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"]
],
"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"]
]
}

使用带有功能搜索的json填充级联下拉列表

2 个答案: