jQuery hide（）;和show（）;問題在Internet Explorer中

我已經與Internet Explorer摔跤了幾個小時了，似乎無法找出我的問題。我試圖用jQuery show（）和hide（）實現一個簡單的「組選項切換器」。 http://softwaredb.org/test/jquery-multi-select.html jQuery hide（）;和show（）;問題在Internet Explorer中

我的代碼在IE以外所有瀏覽器：

如果你看看我的演示，明白我的意思很可能是最好的。我的代碼是這樣的...

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Demo - Jquery Multi Select box</title> 
    <style type="text/css"> 
    select{width:200px;height:200px;} 
    select#boysnames, select#girlsnames{display:none;} 
    </style> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 

<body> 
<div id="wrapper" style="padding:50px 0 0 50px;"> 

<form>  
    <select multiple="multiple" id="theoptions"> 
     <option value="boysnames">Boys Names</option> 
     <option value="girlsnames">Girls Names</option> 
    </select> 

    <select multiple="multiple" id="placeholder"> 
    </select> 

    <select multiple="multiple" id="boysnames"> 
     <option>John</option> 
     <option>David</option> 
     <option>Tom</option> 
    </select> 

    <select multiple="multiple" id="girlsnames"> 
     <option>Jenny</option> 
     <option>Amanda</option> 
     <option>Sara</option> 
    </select> 
</form> 
</div> <!-- end #wrapper --> 

<script type="text/javascript"> 
$('option[value="boysnames"]').click(function() { 
    $('select#placeholder, select#girlsnames').hide(); 
    $('select#boysnames').show(); 
}); 
$('option[value="girlsnames"]').click(function() { 
    $('select#placeholder, select#boysnames').hide(); 
    $('select#girlsnames').show(); 
}); 
</script> 

</body> 
</html>

我的邏輯是......點擊後，隱藏所有其他選擇標籤並顯示我想要看到的標籤。它似乎工作正常，直到我嘗試在IE瀏覽器。任何想法我做錯了什麼？我對jquery（以及一般的javascript /編程）非常陌生，所以如果這是一個愚蠢的問題，請原諒我。

來源

2012-12-22 Garrett Leyenaar

不跟蹤選項級別上的點擊，而是跟蹤選定級別上的更改。

$('select#theoptions').change(function() { 
    $('#placeholder, #girlsnames').hide(); 
    if($(this).val() == 'boysnames') { 
     $('#boysnames').show(); 
    } else {  
     $('#girlsnames').show(); 
    } 
});

有許多方法可以使你的方法更直觀一點，但是這應該讓你去，你是在

來源

2012-12-22 05:34:02 Bryan

你是爲true和false做一些相同的代碼。所以我只是把它放在外面。 –

工作！你是男人！我將在4分鐘內選擇你的答案作爲答案（當它讓我）。多謝，夥計！ –

沒問題！我只想告訴你，如果我從頭開始，我可能會解決這個問題，希望你可以帶走一些東西:) http://pastebin.com/eFG3Kg8W – Bryan

<script type="text/javascript"> 
    $('#theoptions').click(function() { 
    if($(this).attr('value') == "boysnames") 
    { 
     $('select#placeholder, select#girlsnames').hide(); 
     $('select#boysnames').show(); 
    } 
    if($(this).attr('value') == "girlsnames") 
    { 
     $('select#placeholder, select#boysnames').hide(); 
     $('select#girlsnames').show(); 
    } 

    }); 

    </script>

使用的道路上這個..

來源

2012-12-22 06:01:41

也不錯.......... –

jQuery hide（）;和show（）;問題在Internet Explorer中

回答

相關問題