millls Отображение марок в таблице

Ответ на вопрос - https://demiart.ru/forum/index.php?showtopic=267314

by sazakharov

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<div class="container-fluid mod-wrapper">
	<select id="mod" class="mod-select form-control">
		<option value="select-1" selected>Italiano-108W-Y-1.0M-01D-K-V</option>
		<option value="select-2">Italiano-60W-Y-1.0M-01D-K-V</option>
		<option value="select-3">Italiano-54W-Y-0.5M-01D-K-V</option>
		<option value="select-4">Italiano-30W-Y-0.5M-01D-K-V</option>
	</select>
	<table class="table table-bordered table-striped mod-table">
		<thead>
			<tr>
				<th>Технические характеристики</th>
				<th class="text-center mod select-1">Italiano-108W-Y-1.0M-01D-K-V</th>
				<th class="text-center mod select-2">Italiano-60W-Y-1.0M-01D-K-V</th>
				<th class="text-center mod select-3">Italiano-54W-Y-0.5M-01D-K-V</th>
				<th class="text-center mod select-4">Italiano-30W-Y-0.5M-01D-K-V</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>Марка светодиодов</th>
				<td colspan="4" class="text-center">CREE / LUMILEDS</td>
			</tr>
			<tr>
				<th>Количество светодиодов</th>
				<td class="text-center mod select-1">54</td>
				<td class="text-center mod select-2">54</td>
				<td class="text-center mod select-3">27</td>
				<td class="text-center mod select-4">27</td>
			</tr>
			<tr>
				<th>Мощность</th>
				<td class="text-center mod select-1">108 Вт</td>
				<td class="text-center mod select-2">60 Вт</td>
				<td class="text-center mod select-3">54 Вт</td>
				<td class="text-center mod select-4">30 Вт</td>
			</tr>
			<tr>
				<th>Напряжение</th>
				<td colspan="4" class="text-center">24В* / 100-240В</td>
			</tr>
			<tr>
				<th>Номинальная частота</th>
				<td colspan="4" class="text-center">50/60 Гц</td>
			</tr>
			<tr>
				<th>Цветовая температура</th>
				<td colspan="4" class="text-center">RGB / Монохром</td>
			</tr>
			<tr>
				<th>Оптика</th>
				<td colspan="4"...

SCSS

.mod {
	&-wrapper {
		padding-top: 15px;
	}
	&-select {
		margin-bottom: 15px;
		margin-left: auto;
		margin-right: auto;
		max-width: 320px;
	}
}

JavaScript

(function($){
	$("#mod").on("change", function(e){
		e.preventDefault();
			let val = $(this).val();
			$(".mod-table .mod").hide();
			$(".mod-table .mod." + val).show();
		return !1;
	}).trigger("change");
}(jQuery))