Question

当我在组合框中选择一个选项时，我想加载不同的html表。例如，如果我有一个有4个类别（汽车，自行车，摩托车和飞机）的组合框，我希望当我选择其中一个选项时，特定的表加载......并且表的大小可能不同（并非所有表格例如是3行和3个单元格，每个表格在结构上可能不相同）

 <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”选项时，我希望看到该表格...与组合框中的其他选项相同。

我该怎么做？

Answer 1

以下是两种方法，其中一种使用纯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();
});

使用组合框自动加载html表

1 个答案: