用組合框自動加載html表格

我想在我的組合框中選擇一個選項時加載不同的HTML表格。例如，如果我有一個包含4個類別（汽車，自行車，摩托車和飛機）的組合框，我希望當我選擇其中一個選項時，特定的表格加載...並且這些表格可能大小不同（並非全部表是例如3行3個細胞中，表中的每一個可以不是在結構中的相同）用組合框自動加載html表格

<select name="um" id="um" class="select_opt"> 
<option value="Car">Car</option>" 
<option value="Bike">Bike</option>" 
<option value="Motorbike">Motorbike</option>" 
<option value="Airplane">Airplane</option>" 

<table id="Car" cellspacing="0"> 

    <tr> 
    <th scope="alt">Title 1</th> 
    </tr> 
    <tr> 
    <td>Something 1</td> 
    <td>Something 2</td> 
    </tr> 
</table>

我有該組合框和所述表中的一個，我想看到該表時，我選擇「Car」選項...與組合框中其他選項相同。

我該怎麼做？

來源

2011-09-25 dan

你有什麼這麼遠嗎？你是否至少爲你的組合框數據建立了某種數據結構？ –

我有與選項的組合框，我已經有一個表，適合組合框選項的一個選項...我的想法是，當我選擇其他選項適當的表加載。 – dan

請張貼您的一些代碼，否則答案將非常籠統。 –

這裏有兩個這樣做的方法，一個用純JavaScript（沒有庫），另一個用jQuery。

該過程涉及隱藏所有表，然後根據所選選項的值選擇正確的表來顯示。

由於您提到過您的表格也可能有不同的大小，因此示例表格具有各種列（1-4）。

只有JavaScript：

example jsfiddle

var tables = [ 
    document.getElementById('Car'), 
    document.getElementById('Bike'), 
    document.getElementById('Motorbike'), 
    document.getElementById('Airplane') 
]; 

document.getElementById('um').onchange = function() { 
    // hide all tables 
    for (var i in tables) { 
     tables[i].style.display = "none"; 
    } 
    // get selected value and show it's table 
    var selectedValue = this[this.selectedIndex].value; 
    if (selectedValue) { 
     document.getElementById(selectedValue).style.display = "block"; 
    } 
};

的jQuery：

example jsfiddle

// reuse variable to hide all tables 
var $tables = $('table'); 

// Combobox change event 
$('.select_opt').change(function() { 
    $tables.hide(); 
    $('#' + $(this).val()).show(); 
});

來源

2011-09-26 00:48:23 MikeM

wooow man，很多thx真的！如此快速和詳細的迴應...與例子呢！你是神：P thx。 – dan

我有一個JavaScript衝突：S 當我選擇第二個選項，並顯示錶格後，我所有的javascript功能不再起作用（如顯示日期的一個函數）會發生什麼？ – dan

@dan你有一個jsfiddle的例子，你可以顯示這個問題？ – MikeM

用組合框自動加載html表格

回答

相關問題