选择某个选项时，jQuery显示文本框

当选择某个值时，我希望能够显示相应的文本框。我将感谢任何帮助

JQUERY 
$('#enterdatabox').change(function() {
var selected = $(this).val();
  $('#' + selected).css('display', selected ? 'block' : 'none');
});



HTML
<select name="enterdatabox" id="enterdatabox">
      <option value="">Please Choose...</option>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
      <option value="option4">Option 4</option>
      <option value="option5">Option 5</option>
      <option value="option6">Option 6</option>
      <option value="option7">Option 7</option>
      <option value="option8">Option 8</option>
</select>

<input type="text" id="option1" style="display: none;" />
<input type="text" id="option2" style="display: none;" />
<input type="text" id="option3" style="display: none;" />
<input type="text" id="option4" style="display: none;" />
<input type="text" id="option5" style="display: none;" />
<input type="text" id="option6" style="display: none;" />
<input type="text" id="option7" style="display: none;" />
<input type="text" id="option8" style="display: none;" />

---

您的代码很好，但问题可能是您正在绑定。请在enterdatabox元素存在之前进行更改。有三种简单的解决方案：

将JavaScript代码移到HTML之后 将JavaScript代码包装在$document.readyfunction{} 使用事件委派，例如$document.on'change，'enterdatabox'，函数{ 第一个可能是最简单的

---

顺便说一句，您可以通过删除所有ID并将其包装在一个div中，然后使用.index进行比较来简化此代码。您遇到了什么问题？您的代码似乎很好：@j08691我认为这就是问题所在：@ExplosionPills，您刚才删除的答案是正确的。我尝试了所有三种解决方案，他们修复了p问题是，一旦选择了适当的选项，文本框就不会显示。所以谢谢。是否有一种简单的方法，可以确保在一行选择了许多选项时，文本框不会相互堆叠，而不必隐藏每个文本框？@user2004710我将取消删除我的答案，以便您可以接受。Y您每次都必须删除它们，但只需执行$input.hide之类的操作就相当简单了