JSFiddle - React, Tailwind, and code Playground

by Denis Tverdokhlebov

HTML

<select id="new_selet" name="test">
  <option>Выберите героя</option>
  <option value="t1" data-newselect="2">Тест</option>
  <option value="t2" data-newselect="2">Тест 2</option>
  <option value="t3" data-newselect="1">Трудовая книжка</option>
  <option value="t4" data-newselect="2">Тест 4</option>
</select>
<br><br>
<div id="box">
  <input id="obj_inp" type="text" value="стартовая позиция">
</div>

JavaScript

let check = $('').attr('data-newselect');
let x = $("#new_selet").val();
$('#asd').click(function() {
  alert(x);
});



$('#new_selet').on('change', function() {
  let val = $('#new_selet option:selected').data("newselect");

  if (val == "1") {
    let elem_box = $('#box');
    let new_select = "" +
      "<select id='new_add_select' name='test 2'>" +
      "<option>Выберите дату</option>" +
      "<option value='t1'>Дата 1</option>" +
      "<option value='t2'>Дата 2</option>" +
      "</select>";
    elem_box.replaceWith(new_select);
    alert('1');
  } else if (val == "2") {
    let elem_box_2 = $('#box');
    let new_input = "<input id='obj_inp' type='text' value='input'>";
    elem_box_2.replaceWith(new_input);
    alert('2');
  }

});
/* $('#new_selet').change(); */
/* $('#product-select').focus(); */