0

「iu」と「si」の2つのテーブルがあり、ユーザーが見たいものを選択できるようにドロップダウンリストを配置しました。オプションを選択すると、対応するテーブルが表示されます。

もう 1 つは非表示になっているはずですが、ページが読み込まれると、デフォルトのテーブル「si」が表示されます。

ここに私のJavaScriptコードがあります:

<script>
     $(document).ready(function()
    {
        $('#iu_table').hide();
    });
    $('#iu').onchange=function()
    {
        $('#si_table').hide();
        $('#iu_table').toggle();
    }
</script>

そしてHTMLコード：

<select> 
        <option id="si" selected>SI</option> 
        <option id="iu">IU</option> 
    </select>

テーブル ID はそれぞれ「si_table」と「ui_table」です。

上記のコードを使用しましたが、機能しません。どちらを選択しても、「si」テーブルのみが表示されます。

誰かが助けてくれることを願っています。

4

3 に答える 3

1

jQuery には、toggle()と呼ばれる、一致する要素を非表示/表示するメソッドがあり ます。最初に IU テーブルを非表示にする必要があるため、そのために css トリックが必要になる場合があります。したがってdisplay:none;、IU テーブルを配置し、ドロップダウン値の変更を切り替えます。ワーキングフィドルはこちら

于 2013-07-08T07:13:00.487 に答える
1

これを達成する方法はたくさんあります。id1つは下にあります-ドロップダウンコントロールに属性を追加しました

<select id="myselection"> 
    <option id="si" selected>SI</option> 
    <option id="iu">IU</option> 
</select>

<script>
$('#myselection').bind('change', function(){
    if($('#myselection option:selected').attr('id') == "si"){
       $('#si_table').show();
       $('#iu_table').hide();
    }
    else if($('#myselection option:selected').attr('id') == "iu"){
       $('#si_table').hide();
       $('#iu_table').show();
    }
});
</script>
于 2013-07-08T06:31:27.760 に答える