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

Question

This has been one of the most frustrating online searches-for-an-answer-or-solution EVER! 这是有史以来最令人沮丧的在线搜索之一！ And I still haven't found anything out there that can perform this basic task - with that being said, this IS a search facility that's used very often all over the net ... so it comes as a surprise as to why there aren't many (any) demos / scripts for sale that can do this. 而且我仍然没有找到可以执行此基本任务的任何东西-话虽这么说，这是一种搜索工具，在整个网络上经常使用...所以对于为什么没有搜索引擎感到惊讶可以进行销售的许多（任何）演示/脚本。

I want to have a search facility on my website whereby the user can select a country > province > town (3 drop downs). 我想在我的网站上拥有一个搜索工具，用户可以选择一个国家>省>城镇（3个下拉列表）。

Obviously if the user selects the USA (for example), the next dropdown populates / updates the provinces (states) relevant to USA and so forth with the next drop down. 显然，如果用户选择了美国（例如），则下一个下拉列表将填充/更新与美国相关的省（州），依此类推。

I see a lot of people using ASP.net and AngularJS to perform this funtion but I am using neither languages and don't want to use them. 我看到很多人使用ASP.net和AngularJS来执行此功能，但是我既没有使用任何语言，也不想使用它们。

This guy here has developed a great solution for people who'd like their results to dynamically load up as they select items in the dropdowns - however this isn't what I want. 这家伙在这里开发了想自己处理结果以动态加载，因为他们选择在下拉菜单中的项目谁的人一个很好的解决方案-但是这不是我想要的。

The Javascript and Json approach is where I like to go. 我喜欢使用Javascript和Json方法。 Now this guy here made a great / simple solution for populating dropdowns (I am going to post the code for this script later on). 现在， 这里的人为填充下拉列表提供了一个很好的/简单的解决方案（稍后我将发布此脚本的代码）。

But with ALL of these demos and scripts online, they are ALL missing one thing - the SEARCH facility. 但是，所有这些在线演示和脚本都缺少一件事-SEARCH工具。 It's great populating a dropdown to select correct items but that's half the job done and that's all it does. 填充一个下拉列表以选择正确的项目真是太好了，但这只是完成工作的一半，而且仅此而已。

I want the user to be able to click a SEARCH button AFTER the last item in a dropdown is selected and go to it's respective page (because isn't that what is supposed to be for? - Of course that also depends on the project at hand). 我希望用户能够在选择了下拉菜单中的最后一项之后单击SEARCH按钮并转到其相应的页面（因为这不是预定的用途？-当然，这也取决于项目位于手）。

So lets take the code of the populated dropdown created by the guy in the second link: 因此，让我们在第二个链接中使用此人创建的填充下拉列表的代码：

HTML: 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: 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: 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"]
]
}

(Sorry, I'd like to put this on JSfiddle but there's json involved and I don't know where to put the json code). （对不起，我想把它放在JSfiddle上，但是涉及到json，我不知道将json代码放在哪里）。

So after the 3 dropdown boxes, I'd like to have a button saying "Go" or "Search" and once it's clicked it takes the user to the page of the last selected item. 因此，在3个下拉框之后，我想有一个按钮，说“转到”或“搜索”，一旦单击它，便会将用户带到上一个选定项目的页面。

EG (using the example code above - understand there's only 2 dropdowns in his code): EG（使用上面的示例代码-了解他的代码中只有2个下拉列表）：

I select: 我选择：

BMW 宝马

1 Series 1系列

... and then when I click "GO" - it take me to bmw-1-series.htm ...然后单击“开始”时-我将其转到bmw-1-series.htm

How can this be done? 如何才能做到这一点？ Surely one could add urls to the items in the json file eg: 当然可以将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"]
 ],

and then when you click "GO", it will take you to the respective url. 然后，当您单击“开始”时，它将带您到相应的URL。 Obviously this needs extra code I can imagine to be able to grab the url of the selected item and take the user to that page (something I wouldn't know how to do)? 显然，这需要额外的代码，我可以想象得到，能够获取所选项目的网址并将用户带到该页面（这是我不知道该怎么做的）？

Is there a better way to do this? 有一个更好的方法吗？

UPDATE TO MAKE THIS CLEARER: 更新以使其更清晰：

Go to CSS TRICKS DEMO 转到CSS TRICKS DEMO

This is what I want (to be able to populate the dropdowns - this is the only thing the demo does) however if the user wants to search for Coffee's ... they would click on BEVERAGES > then choose COFFEE and then I'd like them to be able to click a button (just below the 2 dropdowns) saying SEARCH ... which will take them to a page with all the coffees listed on 这就是我想要的（能够填充下拉菜单-这是该演示的唯一操作），但是，如果用户要搜索Coffee ...，他们可以单击Beverages（饮料）>然后选择COFFEE（咖啡），然后我要他们可以单击显示SEARCH ...的按钮（在2个下拉菜单的下方），将其带到列出了所有咖啡的页面

Answer 1

As you requested, I looked at the code and have corrected it. 根据您的要求，我查看了代码并对其进行了更正。 It can be found at: 可以在以下位置找到：

http://plnkr.co/edit/RnCdfnrX0jy3RvmXjF56 http://plnkr.co/edit/RnCdfnrX0jy3RvmXjF56

Link-only answers are frowned upon in StackOverflow, so I will write a little more: 仅链接的答案在StackOverflow中不受欢迎，因此我将写更多一点：

As I wrote in my original comment: 正如我在原始评论中写道：

If you are generally following along with the video you posted, you should be able to use that as a foundation. 如果您通常跟着您发布的视频一起观看，那么您应该可以以此为基础。 You can do one of two things with your links, either maintain your own datastructure (even a basic Object) to map between the value of the leaf node select items and then navigation destination, or add them directly as a data attribute when adding them to the menu. 您可以使用链接执行以下两项操作之一：维护自己的数据结构（甚至是基本对象）以在叶节点选择项的值与导航目标之间进行映射，或者在将它们添加到时将它们直接添加为数据属性。菜单。 Then your button code can lookup the URL in whichever place you put it. 然后，您的按钮代码可以在放置该URL的任何位置查找该URL。 In his line 15 (in the 'marque' handler) you could have: 在他的第15行中（在“ marque”处理程序中），您可以：

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

if URL is in spot 2 如果URL位于第2点

Although C Fasolin took the code you pointed to and my advice and attempted to convert it to an answer, you are correct that the code provided in the answer has errors in it. 尽管C Fasolin接受了您所指向的代码和我的建议，并尝试将其转换为答案，但您是正确的，答案中提供的代码中有错误。

Since SO requires code for Plunkr links, I now also have to paste some code in here as well. 由于SO需要Plunkr链接的代码，因此我现在也必须在此处粘贴一些代码。 This is the corrected JS code minus the silly number of alerts injected into the code (which I only bothered to comment out in the Plunkr, but removed here to be tidier). 这是经过更正的JS代码减去注入到代码中的警报的愚蠢数量（我只想在Plunkr中将其注释掉，而在此处将其删除以保持整洁）。 The HTML and JSON were fine and are also on the Plunkr. HTML和JSON都很好，也可以在Plunkr上使用。 Note that the JSON data only contains URLs for the BMW examples so you will get a 404 when clicking "go" for other makes, ou marques, en français. 请注意，JSON数据仅包含BMW示例的URL，因此，对于其他商标（法语）在单击“ go”（转到）时，您将获得404。

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

Happy menuing! 菜单愉快！

Answer 2

this solution work for me: 此解决方案为我工作：

JAVASCRIPT: 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 的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: 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 个解决方案

解决方案1
2 已采纳 2015-10-08 01:08:11

解决方案2
0 2015-09-29 19:04:31

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-10-08 01:08:11

解决方案2 0 2015-09-29 19:04:31

解决方案1
2 已采纳 2015-10-08 01:08:11

解决方案2
0 2015-09-29 19:04:31