在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>