JSFiddle - React, Tailwind, and code Playground

by uggway

HTML

<table>
<tr><td>
Наименование </td><td>
<select id='dd_name'>
<option>Выберите датчик</option>
    <option>Дон17</option>
<option>Дон17М1</option>
<option>Дон17М2</option>
</select>
    </td><td rowspan=16><div id='dd_img'></div></td></tr>

<tr><td>
Тип </td><td>
<select id='dd_type'>
<option value=''> Выберите тип датчика </option>
<option value='ДА'>Абсолютного давления (ДА)</option>
<option value='ДИ'>Избыточного давления (ДИ)</option>
<option value='ДВ'>Разрежения (ДВ)</option>
<option value='ДИВ'>Давления-разрежения(ДИВ)</option>
<option value='ДГ'>Гидростатического давления (ДГ)</option>
<option value='ДД'>Разности давления (ДД)</option>
</select>
</td></tr>

<tr><td>
Верхний предел измерений</td><td>
<select id='dd_lim'> </select>  по модели<br>
<select id='dd_lim2'> </select> из ряда <br>
<input id='dd_lim3' type='text' /> выбор пользователя<br>
</td></tr>    

<tr><td>
Ед. изм.</td><td>
<select id='dd_ei'>
<option>кПа</option>
<option>МПа</option>
<option>кгс/cм2</option>
<option>бар</option>
<option>м.вод.ст.</option>    
</select>
</td></tr>
    
<tr><td>
Модель </td><td>
<select id='dd_model'>
</select>
</td></tr>

<tr><td>
Взрывозащита </td><td>
<select id='dd_expl'>
<option value=''>Общепромышленный</option>
<option value='Ex'>0ExiaIICT6</option>
<option value='Ex-Вн'>1ExdIICT6</option>
</select>
</td></tr>

<tr><td>
Приемка</td><td>
<select id='dd_priemka'>
<option value="">ОТК</option>
<option value=" МР">МР</option>
</select>
</td></tr>

<tr><td>
Погрешность</td><td>
<select id='dd_err'>
<option>0,1</option>
<option selected>0,25</option>
<option>0,5</option>
<option>1</option>
</select>
</td></tr>


<tr id='tr_pmax' style='display:none'><td>
Раб. давление ДД</td><td>
<select id='dd_pmax' >
<option>4</option>
<option>10</option>
<option>25</option>
<option>40</option>
</select>
</td></tr>

<tr id='tr_dglen' style='display:none'><td>
Длина кабеля ДГ</td><td>
<input type='text' id='dd_dglen' value='10'>
 </td></tr>

<tr id='tr_dgmat'...

CSS

table{
		border:1px solid black;
		collapse:0px;
	}
	
select{
    width:170px;
}
tr{
    height:30px;   
}
td{
     border-bottom:1px solid #ddd;    
}
tr:hover{
    background:#ddd;    
}

JavaScript

var models=[];
    var plimits=[60,40,25,16,10,6,4,2.5,1.6,1.0,0.6,0.4,0.25,0.16,0.1,0.06,0.04,0.025,0.016,0.01,0.006,0.004,0.0025,0.0016,0.001,0.0006,0.0004,0.00025,0.00016,0.0001,0.00006];
    var plimits_div=[0.050,0.030,0.020,0.0125,0.008,0.005,0.003,0.002,0.00125,0.0008,0.0005,0.0003,0.0002,0.000125,0.00008,0.00005,0.00003];
    var plimits_divM=[2.4,1.5,0.9,0.5,0.3,0.15,0.06];
    

    models["ДА"]={models:[1023,1043,1062,1072], 
                    
                     lim:[0.01,0.25,2.5,16]}
    models["ДИ"]={models:[1101,1111,1113,1123,1133,1142,1145,1152,1155,1162,1172,1182,1192],                    
                     lim:[0.0004,0.0016,0.0016,0.01,0.04,0.1,0.1,0.6,0.6,2.5,16,40,60]};	
    models["ДД"]={models:[1413,1423,1433,1443,1453,1463],
                     lim:[0.0016,0.01,0.04,0.25,1.6,2.5]};
    models["ДГ"]={models:[1524,1534,1544,1545,1554,1555],
                     lim:[0.01,0.04,0.25,0.1,0.6,0.6]};
    models["ДВ"]={models:[1201,1211,1213,1223,1233,1242],
                     lim:[0.1,0.04,0.01,0.0016,0.0016,0.0004]};
    models["ДИВ"]={models:[1301,1311,1313,1323,1342,1352,1362],
                      lim:[0.0003,0.002,0.0008,0.005,0.05,0.5,2.4]};

function gen_img(){
    n = $("#dd_name")[0].selectedIndex;
    m = $("#dd_model").val();
    e = $("#dd_expl")[0].selectedIndex;
    if(m != null) m = m[3];
    s = n+"_"+m+"_"+e+".jpg";
    $("#dd_img").html(s);
}
//
/////////// TYPE
//
$("#dd_type").change(function(){ 
    
    $("#dd_model").html("");
    $("#dd_lim").html("");
    if(this.value=="ДД") $("#tr_pmax").show("slow"); else  $("#tr_pmax").hide("slow");
    if(this.value=="ДГ") $("#tr_dglen").show("slow");  else  $("#tr_dglen").hide("slow");
    if(this.value=="ДГ") $("#tr_dgmat").show("slow");  else  $("#tr_dgmat").hide("slow");
    if(this.value=="ДГ") $("#dd_ei")[0].selectedIndex=4;
    modelOptions=models[this.value].models;    
    $.each(modelOptions, function(key,value) 
           {           
          ...