Question

我有以下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个现有表中的一个，首先出现的默认表是表“table-Koloman”，因为在选择表单中已经选择了id =“Koloman”。

如果我改变了id =“display”那么当按下“显示数据”按钮时会出现表id =“table-display”，jquery javascript如何编码这个问题？

Answer 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/

Answer 2

您可以将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()

Answer 3

您是否要在单击show data后隐藏table-koloman并显示表格显示。如果是的话

将“ dropDownId ”作为id添加到select标记并尝试此操作

$('.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();
    }
});

Answer 4

$("table").hide();
$(".button-show").click(function(){    
    $("table").hide();
    $("#table-" + $("select").val().toLowerCase()).show();
});

在jquery中显示所选表单的不同表

4 个答案: