jQuery 隐藏（）；和显示（）； Internet Explorer 中的问题答案

【问题标题】：jQuery hide(); and show(); issue in Internet ExplorerjQuery 隐藏（）；和显示（）； Internet Explorer 中的问题
【发布时间】：2012-12-22 05:28:44
【问题描述】：

我已经与 Internet Explorer 搏斗了几个小时，但似乎无法弄清楚我的问题。我正在尝试使用 jQuery show() 和 hide() 实现一个简单的“组选项切换器”。

最好看看我的演示，看看我的意思：http://softwaredb.org/test/jquery-multi-select.html

我的代码适用于除 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/编程）非常陌生，所以如果这是一个愚蠢的问题，请原谅我。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

不是在选项级别跟踪点击，而是在选择级别跟踪更改。

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

有很多方法可以让你的方法更直观一点，但这应该会让你走上你正在走的路

【讨论】：

你在为真假做同样的代码。所以我只是把它放在外面。
成功了！你是男人！我将在 4 分钟内选择您的回复作为答案（当它允许我时）。谢谢老兄！
没问题！我只是想向您展示如果我从头开始解决这个问题，我可能会如何解决这个问题，希望您能从中有所收获:) pastebin.com/eFG3Kg8W
太棒了！你的代码比我的干净得多。我正在处理的项目在选择框中有很多选项，这意味着我的方法有很多代码。再次感谢！！

【解决方案2】：

    <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>

使用这个..

【讨论】：