1

私はここ数時間InternetExplorerと格闘していて、私の問題を理解できないようです。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();
    }
});

There are many ways to make your approach a little more intuitive, but this should get you going on the path that you're on

于 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 に答える