JSFiddle - React, Tailwind, and code Playground

by vlit

HTML

<select name="celect1" class="js-select2" id="celect1">
  <option value="0">Выберите</option>
  <option value="Вариант 1">Вариант 1</option>
  <option value="Вариант2" selected>Вариант2</option>
  <option value="Вариант 3">Вариант 3</option>
  <option value="Вариант 4">Вариант 4</option>
</select>


<div id="tipdokceria">
<label class="mrt2">Серия документа <b>*</b></label>
<input type="text" name="dkc" id="dkc" value="">
</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

$(document).on('change', '#celect1', function(e) {
  $('div.tipdokceria').slideUp();
  $('#tipdokceria')[$(this).val() == 'Вариант2' ? 'hide' : 'show']();
});


$(document).ready(function() {
    $('#celect1').trigger('change');
});