JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<thead>
<tr><th>Device</th>
<th><select required="required" id="device">
<option value="Tablet">Tablet</option>
<option value="Smartphone">Smartphone</option>
</thead>
<tbody>
<tr>
<tr><th>Brand</th>
<th><td><select id="brand"></select></td></th>
</tr>
</tbody>
<tbody><tr><th>Model</th><th><select id="model"></select></tbody>
</table>
JavaScript
$(function() {
var brands = {
'Tablet' : [ 'Acer', 'Alcatel', 'Archos', 'Asus', 'GoClever''HP''HTC''Huawei''Lenovo''LG''Motorola''''''''''''''''''''
}
var $brands = $('#brand');
$('#device').change(function () {
var devices = $(this).val(), elems = brands[devices] || [];
var html = $.map(elems, function(elems){
return '<option value="' + elems + '">' + elems + '</option>'
}).join('');
$models.html(html)
});
});