jquery - 在 jquery 中显示选定的表格不同的表

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" 那么 table 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>
    <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

单击显示数据后是否要隐藏 table-koloman 并显示 table-display。如果是这样的话

将“ dropDownId ”作为 id 给选择标签并尝试这个

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