Question

我希望能够在选择某个值时显示相应的文本框。我将不胜感激任何帮助。

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;" />

Answer 1

您的代码很好，但问题可能是您在.change元素存在之前绑定#enterdatabox。有三个简单的解决方案：

在 HTML

在$(document).ready(function () {}
中包装JavaScript代码
使用事件委托，例如$(document).on('change, '#enterdatabox', function () {

第一个可能是最简单的。

顺便说一句，你可以通过删除所有id并将<input>包装在div中并使用.index()
进行比较，使这段代码变得更加简单

选择选项时jQuery显示文本框

1 个答案: