Question

我有一个选择字段，根据所选值显示我的表单的不同元素，我有三个“类”，每个类显示字段的所需部分。我目前有选择绑定到.click（），它工作正常，但如果我想加载具有预选值的页面，它将不会显示表单的必需部分，因为选择字段实际上没有点击。

我环顾四周，并没有看到一个允许我根据所选值显示信息的事件，但我不是专家，所以也许我只是误解了一些功能。

以下是我的HTML的相关部分：

 <select name="class">
    <option value="vehicle" selected="selected">vehicle</option>
    <option value="part">Part</option>
    <option value="project">Project</option>
    <option value="vehicle">Vehicle</option>
 </select><br />
<etc...>

我目前的jQuery切换器：

   $("select option[value='project']").click(function() {
      $('div.part-show').show().hide();
      $('div.both-show').hide().show();
      $('div.vehicle-show').hide().show();
   });

非常感谢！

Answer 1

您应该对select标记使用change（）事件。

$("select").change(function() {
  if ($("select").val() == "project") {
    $('div.part-show').show().hide();
    $('div.both-show').hide().show();
    $('div.vehicle-show').hide().show();
  }
});

Answer 2

我有一个类似的问题，我为了让它工作而做的是我在我想要预选的对象上发出了一个点击事件（或者我的情况下的一个选择事件）。

所以...在您的jQuery代码中，在设置更改功能后执行以下操作：

$('select option:first').click();

这应该触发您的活动并立即隐藏/显示所有内容。

另一个运行良好的选项是根据默认选择的值显示和隐藏某些HTML（仅将其编码到HTML中）。如果您将具有静态默认选择值（AKA，它不是基于其他用户输入的动态），则此方法有效。

jQuery按选择字段显示/隐藏元素

2 个答案: