Question

我有一张表格，如下：

<form action="" method="post">
   <select name="pageType">
      <option value="main">Main Page</option>
      <option value="sub">Sub Page</option>
      <option value="sub-sub">Sub-Sub Page</option>
   </select>

<br />

<label>Choose Sub Sub Name:</label> <input type="text" name="sub-sub-name" />

<br />

<input type="submit" name="submit" value="GO!" />

</form>

我想要获得的是这个文本字段（以及它的标签）：

<label>Choose Sub Sub Name:</label> <input type="text" name="sub-sub-name" />

到仅在下拉列表中选择第3个选项（子子页面）时显示，否则不显示。如何使用javascript或jquery框架来完成？

修改

顺便说一下，如果没有页面需要刷新并丢失以前提交的表单数据，那将是很好的。我知道表格数据仍然可以使用存储值甚至页面刷新的变量来保存，但我希望在很多网站上看到的那种效果，其中只是出现附加文本区域（或其他表单元素）而没有页面刷新

Answer 1

隐藏/显示标签和字段很容易。将字段放在标签中（与之关联），给出标签style="display: none"，并为其指定ID。 E.g：

<label id='thirdField' style='display: none'>Choose Sub Sub Name: <input type="text" name="sub-sub-name" /></label>

然后您可以通过show

显示它

$("#thirdField").show();

...并通过hide隐藏它：

$("#thirdField").hide();

...或（并且它不是文档中的超级清晰，但是如果你到达页面底部就可以找到它），你可以使用toggle基于布尔值进行切换：< / p>

$("#thirdField").toggle(true); // true to show, false to hide

所以现在你需要的是当选择select中的第三个选项时触发的触发器。有change事件，但在焦点离开select字段之前它不会触发。（jQuery将其标准化;否则，当它被触发时将依赖于浏览器。）你可以在选项本身上尝试click，但是当通过键盘导航时我不知道它是否可靠。

要积极主动（如果您所显示的字段紧跟在标签顺序中的选择框之后，这一点尤为重要！），我倾向于使用计时器来监视变化（我从Prototype人那里得到的想法，他们有一整个课程）：

var selectField = $("#mySelectField");
var thirdField = $("#thirdField");
var handle = setInterval(watchForChange, 250); // Every quarter second
function watchForChange() {
    thirdField.toggle(selectField.val() === "sub-sub");
}

（我假设您已将id mySelectField提供给您的选择字段。）当您不再需要这样做时，您想要取消间隔：

clearInterval(handle);
handle = 0;

当然，你不会在顶层完成上述所有操作，这会产生一堆全局变量。你把它放在一个范围界定功能中。

Answer 2

您必须在下拉列表中注册一个onChange事件处理程序，这样当它的值发生变化时，您将检查它是否是您想要的当前所选项目，然后显示输入，否则将其隐藏

我建议您首先将标签+输入包装在div中并使用CSS（display:none;）隐藏它，然后给它一个ID。

然后，使用jQuery：

$('form select[name=pageType]').change(function(){
  if ($('form select option:selected').val() == 'sub-sub'){
    $('#input_with_label_id').show();
  }else{
    $('#input_with_label_id').hide();
  }
});

Answer 3

$("select[name=pageType]").change(function(){
if($(this).attr("selectedIndex")) == 2)
$('#subsub').show();
});

然后将表单元素包装在div中：

<div id="subsub" style="display:none;"><label>Choose Sub Sub Name:</label> <input type="text" name="sub-sub-name" /></div>

Answer 4

<强>的jQuery

$(document).ready(function(){
  $('#pagetype').change(function(){
    $('#choosesubsub')[$(this).val()=='sub-sub' ? 'show' : 'hide']();
  });
});

<强> HTML

<form action="" method="post">
  <select name="pageType" id="pagetype">
    <option value="main">Main Page</option>
    <option value="sub">Sub Page</option>
    <option value="sub-sub">Sub-Sub Page</option>
  </select>

  <br />

  <div id="choosesubsub" style="display: none;"><label>Choose Sub Sub Name:</label> <input type="text" name="sub-sub-name" /></div>

  <br />

  <input type="submit" name="submit" value="GO!" />
</form>

正如您在HTML中看到的，我添加了一些ID，以便我可以更轻松地识别元素。另外，我用DIV包装了“选择子子名称”。

如果在JavaScript或jQuery中选择另一个表单字段，如何显示表单字段？

修改

4 个答案: