JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <form action="" class="form">
    <div class="form__group">
      <input type="text" class="form__input" value="Jhon Doe">
    </div>
    <div class="form__group">
      <select name="mydata" id="example" class="form__input">
        <option value="value1">value 1</option>
        <option value="value2">value 2</option>
        <option value="value3">value 3</option>
      </select>
      <input type="hidden" value="" id="selectHidden">
    </div>
    <button class="button button--primary">enviar</button>
  </form>
</div>

SCSS

*,
*::after,
*::before {
  box-sizing: border-box;
}

.container {
  max-width: 500px;
  margin: 0 auto;
}

.form {
  &__group {
    margin-bottom: 5px;
  }
  &__input {
    display: block;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
  }
}

.button {
  border: 0;
  padding: 10px 15px;
  border-radius: 4px;
  &--primary {
    background-color: #19B5FE;
    color: #fff;
  }
}

JavaScript

$('#example').on('change', function() {
	var selectVal = $(this).val();
  
  $(this).attr({
    'disabled': true,
    'aria-disabled': true
  });
  $('#selectHidden').val(selectVal)
})