JSFiddle - React, Tailwind, and code Playground

by vlit

HTML

<label>Категория <b>*</b></label>
<select name="celect1" class="js-select2" id="celect1">
  <option value="0">Выберите</option>
  <option value="Вариант 1" data-priceid="1">Вариант 1</option>
  <option value="Вариант 2" data-priceid="2">Вариант 2</option>
  <option value="Вариант 3" data-priceid="3">Вариант 3</option>
  <option value="Вариант 4" data-priceid="4">Вариант 4</option>
</select>

<br>

<div id="taxogr" style="display:none">
  <label class="mrt2">Марка тахографа</label>
  <input type="text" name="markatoxog">

  <label class="mrt2">Модель тахографа</label>
  <input type="text" name="modeltaxog">

  <label class="mrt2">Номер тахографа</label>
  <input type="text" name="nomertaxog">
</div>

CSS

html, body{
  margin:50px;
}
#sum{
  font-size:20px;
  color: #FF2525;
}
label{
  display:block;
  margin-bottom:5px;
}
label b{
color: #FF2525;
}
select{
  border: 1px solid #224B63;
  padding: 15px 20px 15px 20px;
  border-radius: 5px;
}







html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;}
html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video{display:inline-block;}
audio:not([controls]){display:none;height:0;}
[hidden]{display:none;}
a{outline:none; text-decoration: none;}
abbr[title]{border-bottom:1px dotted;}
pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
sub,sup{font-size:75%;line-height:0;position:relative;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}
button,input{line-height:normal;}
button,html...

JavaScript

$('#celect1').change(function() {
  $('div.taxogr').slideUp();
  //$('#p_' + $(this).val()).slideDown();
});
$(document).ready(function() {
  $('#celect1').change(function() {
    let selectValue = $(this).val();
    ['Вариант 2', 'Вариант 3'].includes(selectValue) ? $('#taxogr').show() : $('#taxogr').hide();
  });
});