1

我已经与 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/编程）非常陌生，所以如果这是一个愚蠢的问题，请原谅我。

4

2 回答 2

7

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

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

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

于 2012-12-22T05:34:02.897 回答
1 
    <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-22T06:01:41.413 回答