爲什麼我的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中工作？

回答

相關問題