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中

回答

相关问题