【问题标题】:Html and javascript <select> tags with filtering带有过滤功能的 Html 和 javascript <select> 标签
【发布时间】:2014-01-01 05:17:21
【问题描述】:

我会尽量做到具体。

所以我需要创建一个筛选选项的选择器。

我有:

  1. 汽车类型
  2. 可以驾驶这些汽车的地方。

例如,您将选择 > Ferrari > 然后显示第二个选择标签上的正确区域

即选择 > 法拉利 = 伦敦、剑桥、德文郡、新罕布什尔州

  Select > Lamborghini = London, Bertshire, Oakwood,

然后终于

他们选择(法拉利+剑桥),然后按“开始”并跳转到最终链接,将他们带到正确的页面。

我的代码是:

    <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.js'></script>

<script type='text/javascript'>//<![CDATA[ 




$('#filter-regions').on('click', function() {
    var pilotage-carFilter = $('#pilotage-car').text();
    var itemFilter = $('#items').text(); 

    console.log('pilotage-carFilter: ' + pilotage-carFilter);
    console.log('itemFilter : ' + itemFilter);
    console.log('Applying filter now...');

    featureList.filter(function(item) {
        console.log('Running filter() on item: ('+item+')');
        console.log('item.values().pilotage-car: ' + item.values().pilotage-car);
        console.log('item.values().item: ' + item.values().item);

        return 
            (pilotage-carFilter==='Ferrari' || item.values().pilotage-car === pilotage-carFilter) 
            && (itemFilter==='All items' || item.values().item === itemFilter);
    });

    return false;
});



//]]>  

</script>


</head>

<body>

<form id="filter">
<select id="pilotage-car" name="pilotage-car" size="1">
<option value="http://www.coolcadeau.fr/Stage-de-pilotage-Ferrari-BN-5iZ5.aspx?SqNo=5iZ5&cm_sp=LHN-_-Voiture-_-Ferrari&cm_re=Ferrari-_-Voiture-_-LHN">Ferrari</option>
<option value="Porsche">Porsche</option>
<option value="Lamborghini" selected>Lamborghini</option>
<option value="Mustang">Mustang</option>
<option value="Audi" selected>Audi</option>
<option value="Multivolants">Multivolants</option>
<option value="Rallye">Rallye</option>
<option value="Subaru">Subaru</option>
<option value="Karting">Karting</option>
<option value="4x4">4x4</option>
<option value="Moto">Moto</option>
<option value="Quad">Quad</option>
<option value="Buggy">Buggy</option>
<option value="Renault Sport">Renault Sport</option>
<option value="Prototype">Prototype</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Corvette">Corvette</option>
</select>

<select id="items" name="items" size="1">
<option value="http://www.coolcadeau.fr/Stage-de-pilotage-Ferrari-Alsace-BN-5iZ5Z1z13skq.aspx?SqNo=5iZ5Z1z13skq&cm_sp=LHN-_-Region-_-Alsace&cm_re=Alsace-_-Region">A l'&eacute;tranger</option>
<option value="Alsace">Alsace</option>
<option value="Aquitaine" selected>Aquitaine</option>
<option value="Auvergne">Auvergne</option>
<option value="Basse-Normandie" selected>Basse-Normandie</option>
<option value="Bourgogne">Bourgogne</option>
<option value="Bretagne">Bretagne</option>
<option value="Centre">Centre</option>
<option value="Champagne-Ardenne">Champagne-Ardenne</option>
<option value="Franche-Comt&eacute;">Franche-Comt&eacute;</option>
<option value="Haute-Normandie">Haute-Normandie</option>
<option value="Ile-de-France">Ile-de-France</option>
<option value="Languedoc-Roussillon">Languedoc-Roussillon</option>
<option value="Limousin">Limousin</option>
<option value="Lorraine">Lorraine</option>
<option value="Midi-Pyr&eacute;n&eacute;es">Midi-Pyr&eacute;n&eacute;es</option>
<option value="Nord-Pas-de-Calais">Nord-Pas-de-Calais</option>
<option value="Pays de la Loire">Pays de la Loire</option>
<option value="Picardie">Picardie</option>
<option value="Poitou-Charentes">Poitou-Charentes</option>
<option value="Provence-Alpes-C&ocirc;te d'Azur">Provence-Alpes-C&ocirc;te d'Azur</option>
<option value="Rh&ocirc;ne-Alpes">Rh&ocirc;ne-Alpes</option>
</select>




<input id="go-button" type="button" name="test" value="Go"/>
</form>

我真的完全不确定 javascript。

我怎么能,和/或我可以实现这一目标的最佳方式是什么?有没有例子?

编辑:我发现了类似的东西http://jsfiddle.net/dtAgX/1/ 但我需要一个 sumbit 按钮,它将根据选择链接到正确的页面。

提前致谢

【问题讨论】:

  • 那么问题是什么?这个网站不是为了收集代码,而是为了获得特定问题的帮助
  • 对不起,我的问题基本上是如何制作一个可以像我解释的前几句话一样执行的选择器?

标签: javascript html select html-select


【解决方案1】:

您有多种选择,具体取决于您的后端、PHP、ASP 等。或纯 HTML。 如果您使用 PHP/ASP,您可以为您提供一个“动作”和一个“方法”,并让服务器根据您选择的值提供正确的页面。

如果您使用纯 HTML,您可以向您添加一个“onsubmit”事件并让 javascript 重定向到正确的页面。

在这两种情况下,“go-button”都应该是“submit”类型。

如果您需要更多帮助,我需要了解有关您的设置的更多信息 :-)

另外,所有汽车都可以在所有地点行驶吗?

【讨论】:

  • 嗨,谢谢。我做这件事的网站是coolcadeau.fr他们实际上使用aspx。而且只有特定的汽车可以在特定的地点行驶。希望这会有所帮助:)
  • 看看link 抱歉,我不擅长使用aspx。函数 update1 将修改在第二次选择时有效的选项。在这里你应该插入你自己的脚本。
  • 您好,谢谢。它让事情有了更好的视角。但是我在哪里添加所有链接?
  • 可以通过服务器端脚本添加链接,或者通过 Javascript:jsfiddle.net/4BVfJ
  • @user3099325 运气好吗?
猜你喜欢
  • 1970-01-01
  • 2015-06-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-06-09
  • 1970-01-01
  • 2018-08-19
  • 1970-01-01
相关资源
最近更新 更多