1

次のhtmlコーディングがあります

<select>
<option id="koloman" selected>Koloman</option>
<option id="display" selected>Display</option>
</select>
<input type="submit" class="button-show" value="show data" />

<table id="table-koloman">
//content of table
</table>

<table id="table-display">
//content of table
</table>

2 つの既存のテーブルの 1 つを表示したいのですが、選択フォームで id = "Koloman" が選択されているため、最初に表示されるデフォルトのテーブルはテーブル "table-Koloman" です。

id = "display" を変更すると、"show data" ボタンを押すとテーブル id = "table-display" が表示されます。

4

4 に答える 4

1 
$('#table-display').hide();
$('.button-show').on('click', function() {
    if ($('option:selected').text() === 'Display') {
        $('#table-koloman').hide();
        $('#table-display').show();
    } else if ($('option:selected').text() === 'Koloman') {
        $('#table-koloman').show();
        $('#table-display').hide();
    }
});​

http://jsfiddle.net/hRwAV/

于 2012-12-20T03:08:07.827 に答える
1

ID を値属性に変更してからval、select 要素の現在の値を取得するメソッドを使用できます。

<select>
    <option value="koloman" selected>Koloman</option> 
    <option value="display">Display</option> 
</select>
<input type="submit" class="button-show" value="show data">  

<table id="table-koloman"> <tbody><tr><td>first</td></tr></tbody> </table>  
<table id="table-display"> <tbody><tr><td>second</td></tr></tbody> </table>


var $table = $('table'); // cache the object 
$('.button-show').click(function(e) {
   e.preventDefault(); // prevents the default action of the event.
   var s = $('select').val(); // get the value
   $table.hide().filter('[id="table-'+s+'"]').show() // filter the tables
}).click() // trigger the click on DOM Ready

http://jsfiddle.net/LU3za/

ユーザーにオプションを選択してボタンを押すように強制する代わりに、変更イベントをリッスンすることもできますが、これはユーザーフレンドリーではありません。

var $table = $('table');
$('select').change(function(e) {
      $table.hide().filter('[id="table-'+this.value+'"]').show()
}).change()
于 2012-12-20T03:15:48.593 に答える
0

データの表示をクリックした後、table-koloman を非表示にし、table-display を表示しますか。もしそうなら

select タグに id として「dropDownId 」を与えて、これを試してください

$('.button-show').click(function() {
    if ($('#dropDownId :selected').text() == 'Display') {
        $('#table-koloman').hide();
        $('#table-display').show();
    } else if ($('#dropDownId :selected').text() == 'Koloman') {
        $('#table-koloman').show();
        $('#table-display').hide();
    }
});​
于 2012-12-20T03:04:21.953 に答える
0 
$("table").hide();
$(".button-show").click(function(){    
    $("table").hide();
    $("#table-" + $("select").val().toLowerCase()).show();
});​
于 2012-12-20T03:09:28.043 に答える