为什么我的jQuery隐藏和显示窗体选择元素只能在Firefox中工作？

我用几个选择菜单和几个jQuery隐藏和显示函数创建了这个表单。表单应该工作的方式是，当你点击主选择菜单中的选项时，它会自动显示相应的选择子菜单。 这里是我的代码：为什么我的jQuery隐藏和显示窗体选择元素只能在Firefox中工作？

的jQuery：

$("#mankleding").bind("click",menclothes); 
    $("#manschoen").bind("click",menshoes); 
    $("#manaccessoires").bind("click",menaccessoires); 

    function menclothes(evt){ 

    $("#subkledingheren").show("fast"); 
    $("#subschoenenheren").hide("fast"); 
    $("#subsaccessoiresheren").hide("fast"); 
    } 

    function menshoes(evt){ 

    $("#subkledingheren").hide("fast"); 
    $("#subschoenenheren").show("fast"); 
    $("#subsaccessoiresheren").hide("fast"); 
    } 

    function menaccessoires(evt){ 

    $("#subkledingheren").hide("fast"); 
    $("#subschoenenheren").hide("fast"); 
    $("#subsaccessoiresheren").show("fast"); 

    }

HTML：

<tr> 
     <td> Artikel hoofd-categorie: </td> <td> <select id="manhoofd"> 
           <option>HEREN</option> 
           <option id="mankleding">KLEDING</option> 
           <option id="manschoen">SCHOENEN</option> 
           <option id="manaccessoires">ACCESSOIRES</option> 
           </select> 
           </td> 
    </tr> 
    <tr> 
     <td> Artikel sub-categorie:  </td> <td id="subcategorie"> <select id="subkledingheren"> 
           <option>HEREN-KLEDING</option> 
           <option>Broeken & Jeans</option> 
           <option>Jassen</option> 
           <option>Sweaters & Hoodies</option> 
           <option>Zwemkleding</option> 
           </select> 

           <select id="subschoenenheren"> 
           <option>HEREN-SCHOENEN</option> 
           <option>Sneakers/Casual</option> 
           <option>Slippers & Sandalen</option> 
           <option>Instappers</option> 
           </select> 

           <select id="subsaccessoiresheren"> 
           <option>HEREN-ACCESSOIRES</option> 
           <option>Horloges</option> 
           <option>Brillen & Zonnebrillen</option> 
           <option>Stropdassen</option> 
           </select> 

           </td> 
    </tr>

来源

2012-07-14 the_boy_za

您是否尝试过所有其他浏览器，Chrome，IE，Opera ...调试？控制台说什么？当然你正在加载文档准备好？ – elclanrs 2012-07-14 00:58:00

尝试使用change事件：

$('#manhoofd').change(function(){ 
    var i = $('option:selected', this).text(); 
    $('select(:not(:first))').hide(); 
    $('select:contains('+i+')').show()   
})

DEMO

来源

2012-07-14 01:03:03 undefined

它的工作原理！我不完全理解你的代码，你能解释我的代码，我是一个jQuery新手。 – 2012-07-14 01:23:02

@the_boy_za我也是jQuery新手，它选择所选选项的文本 - 隐藏除第一个选项之外的所有选择元素，并显示包含所选选项的单词。基于你的标记，我决定使用这个解决方案。 – undefined 2012-07-14 01:26:14

为什么我的jQuery隐藏和显示窗体选择元素只能在Firefox中工作？

回答

相关问题