在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");&nbsp; &nbsp; $("#select").change(function(){&nbsp; &nbsp; &nbsp; var res=select.options[select.selectedIndex].getAttribute("name");&nbsp; &nbsp; &nbsp; document.getElementById('number').value=select.options[select.selectedIndex].getAttribute("name");&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $('#number').hide();&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $('#help').hide();&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $('#' + $(this).val()).show();&nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; });<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">&nbsp; &nbsp; <option value="1" name="1">1</option>&nbsp; &nbsp; <option value="2" name="2">2</option>&nbsp; &nbsp; <option value="3" name="3">3</option>&nbsp; &nbsp; <option value="number" name="">Number</option>&nbsp; &nbsp; <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() {&nbsp; var res = $(this).find('option:selected').attr('name')&nbsp; $('#number').val(res)&nbsp; $('#number').hide();&nbsp; $('#help').hide();&nbsp; $('#' + $(this).val()).show();&nbsp; return false;});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><form action="index.php" method="post">&nbsp; <select name="select" id="select">&nbsp; &nbsp; <option value="1" name="1">1</option>&nbsp; &nbsp; <option value="2" name="2">2</option>&nbsp; &nbsp; <option value="3" name="3">3</option>&nbsp; &nbsp; <option value="number" name="">Number</option>&nbsp; &nbsp; <option value="help" name="">Help</option>&nbsp; </select>&nbsp; <input id="number" name="number" value="Choose" style="display:none" />&nbsp; <label id="help" style="display:none">Help!</label>&nbsp; <input type="submit" value="submit" /></form>