Автоматическая загрузка таблицы HTML с помощью combobox

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>

У меня есть поле со списком и одна из таблиц, я хотел бы видеть эту таблицу, когдаЯ выбираю опцию «Автомобиль» ... то же самое с остальными опциями в выпадающем списке.

Как я могу это сделать?

Answer 1

Вот два способа сделать это, один с чистым JavaScript (без библиотеки), а другой с помощью jQuery.

Процесс включает в себя сокрытие всех таблиц, основанных на значениивыбранный параметр выберите правильную таблицу для отображения.

Примеры таблиц имеют различные столбцы (1-4), поскольку вы упомянули, что ваши таблицы также могут быть разных размеров.

Только JavaScript:

пример 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:

пример jsfiddle

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

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