0

すでにオンチェンジの例がたくさんあることは知っていますが、うまくいかないので何か間違ったことをしているような気がします...

2つのテーブルがあり、ドロップダウンメニューから選択したものに応じて1つを表示したいと思います。

<select name="test" id="test" onchange="" size="1">
    <option value="0">Select Table...</option>
    <option value="1">Table 1</option>
    <option value="2">Table 2</option>
</select>

テーブル

<table id = "t1" border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table> 

<table id = "t2" border="1">
<tr>
<th> 1</th>
<th> 2</th>
</tr>
<tr>
<td> 1,  1</td>
<td> 1,  2</td>
</tr>
<tr>
<td> 2,  1</td>
<td> 2,  2</td>
</tr>
</table>

選択したテーブルが表示されるように、onchangeセクションに何を配置する必要がありますか？

私もjQueryを使用しており、そのshow（）関数とhide（）関数を呼び出すことができることは知っていますが、どういうわけか、onchange = ""の部分でそれを行う方法がわかりません...何かアイデアはありますか？

ありがとうございました！

4

3 に答える 3

2

jQueryを使用する場合：

$('#test').change(function() {
    $('#t1,#t2').hide();
    $('#t' + $(this).val()).show();
})

jsFiddleの例

単純なJavaScriptの場合：

var opt = document.getElementById('test');
opt.onchange = function() {
    document.getElementById('t1').style.display = 'none';
    document.getElementById('t2').style.display = 'none';
    document.getElementById('t' + this.value).style.display = '';
}​

jsFiddleの例

于 2012-07-23T17:25:28.730 に答える
1

正直なところ、 HTML要素の属性には何も入れないでください。onchange機能をマークアップから分離することをお勧めします。ページの他の場所（またはページによって参照される別のJavaScriptファイル）で、変更イベントにバインドできます。

$('#test').change(function () {
    $('#t1,#t2').hide();
    var tableValue = $(this).val();
    $('#t' + tableValue).show();
});

編集：selectわかりやすくするために、最後の行は、ターゲットテーブルのの一部としての値を使用していますid。これは、2つが常に相関しているという仮定に基づいていますが、私はその仮定を正確に行う立場にないと思います。より明確なアプローチはこれです：

$('#test').change(function () {
    $('#t1,#t2').hide();
    var tableValue = $(this).val();

    if (tableValue == 1) {
        $('#t1').show();
    } else if (tableValue == 2) {
        $('#t2').show();
    }
});
  • 長所：コードはより明確です。
  • 長所：selectテーブルのとの値は、idコードの変更に応じて時間の経過とともに一致するように手動で維持する必要はありません。
  • 短所：select新しい値と新しいテーブルを追加することは、このコードも変更する必要があることを意味します。
于 2012-07-23T17:27:18.047 に答える
0 
$('select#test').on('change', function () {
    var _tableID = $(this).val();

    $('table[id^="t"]').hide(); // assuming they all start with #id t then a #
    $('#t' + _tableID).show(); // make sure the values in the select options line up
});
于 2012-07-23T17:27:59.590 に答える