выберите опцию ввода текста скрытого блока отображения в javascript

Question

Когда я выбираю опцию «Номер», она не показывает <input id="number">. Я хочу, чтобы все числа были выбраны без ввода, но когда нажата опция «Число», отображается <input id="number">. Пользователи могут ввести число в <input id="number">.

var select = document.getElementById("select");
$("#select").change(function() {
  var res = select.options[select.selectedIndex].getAttribute("name");
  document.getElementById('number').value = select.options[select.selectedIndex].getAttribute("name");
  $('#number').hide();
  $('#help').hide();
  $('#' + $(this).val()).show();
  return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<form action="index.php" method="post">
  <select name="select" id="select">
    <option value="1" name="1">1</option>
    <option value="2" name="2">2</option>
    <option value="3" name="3">3</option>
    <option value="number" name="">Number</option>
    <option value="help" name="">Help</option>
  </select>
  <input id="number" type="hidden" name="number" value="Choose" style="display:none" />
  <label id="help" style="display:none">Help!</label>
  <input type="submit" value="submit" />
</form>

Answer 1

Если вы введете type="number" вместо type="hidden", это заставит пользователя вводить только цифры.

var select= document.getElementById("select");
    $("#select").change(function(){
      var res=select.options[select.selectedIndex].getAttribute("name");
      document.getElementById('number').value=select.options[select.selectedIndex].getAttribute("name");  
        $('#number').hide(); 
        $('#help').hide(); 
        $('#' + $(this).val()).show();
      return false;
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<form action="index.php" method="post">
<select name="select" id="select">
    <option value="1" name="1">1</option>
    <option value="2" name="2">2</option>
    <option value="3" name="3">3</option>
    <option value="number" name="">Number</option>
    <option value="help" name="">Help</option>
</select>
<input id="number" type="number" name="number" value="Choose" style="display:none"/>
<label id="help" style="display:none">Help!</label>
<input type="submit" value="submit"/>
</form>

Answer 2

Не используйте type="hidden". Потому что его не видно на html, если display:block также. И вы уже используете jquery, так что лучше использовать селектор с jquery $(this).find('option:selected').attr('name')

var select = document.getElementById("select");
$("#select").change(function() {
  var res = $(this).find('option:selected').attr('name')
  $('#number').val(res)
  $('#number').hide();
  $('#help').hide();
  $('#' + $(this).val()).show();
  return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="index.php" method="post">
  <select name="select" id="select">
    <option value="1" name="1">1</option>
    <option value="2" name="2">2</option>
    <option value="3" name="3">3</option>
    <option value="number" name="">Number</option>
    <option value="help" name="">Help</option>
  </select>
  <input id="number" name="number" value="Choose" style="display:none" />
  <label id="help" style="display:none">Help!</label>
  <input type="submit" value="submit" />
</form>