选择最后一个选项后显示另一个选项框

时间:2014-02-11 03:38:06

标签: php jquery

我正在尝试制作一个过滤器,当用户在第一个选项框中选择时,会弹出另一个选项框,依此类推。我可以通过提交表单来完成此操作但我需要的是用户需要在提交之前完成所有选择。我知道我需要一个jquery它或一些PHP代码,但我找不到,我不知道在哪里找到它。

这就是我想要的。

汽车品牌 - >电动机型号 - >电机部件 - >提交 之后,它将过滤我的数据库中的内容。你能告诉我一个这方面的样本吗?提前thx和更多功能stackoverflow。

2 个答案:

答案 0 :(得分:0)

您可以根据选项菜单值的更改创建三个选项菜单并隐藏/显示。

下面的代码示例我给你一个javascript函数,它可以帮助你。

切换可见性:

function showhide(id){

if(document.getElementById(id) .className == "showhidediv_show"){

document.getElementById(id).cl assName="showhidediv_hide"; }else{

document.getElementById(id).cl assName="showhidediv_show"; } }

个别showhide功能:

function show(id) { document.getElementById(id).cl assName="showhidediv_show"; } function hide(id) {

document.getElementById(id).cl assName="showhidediv_hide"; }

希望这有帮助

答案 1 :(得分:0)

我会使用index()和'.eq()'这将使你的js更容易使用

Fiddle

HTML

<div id ="first">
<select style="display:block">
    <option>Car</option>
    <option>Truck</option>
</select>
</div>

<div id ="second">
<select>
    <option>Mitsubishi</option>
    <option>Honda</option>
</select>
    <select>
    <option>Ford</option>
    <option>Chevy</option>
</select>
</div>

JQuery的

$(window).load(function(){
     $('#first').find('select').change(function(){
         var show = $(this).find('option:selected').index();
         $('#second select').hide().eq(show).show();    
     });
});