Question

我有以下jQuery代码用于显示/隐藏条件表单字段（包含在tr#other-employer中）。一旦页面加载并且选项被更改，这样就可以正常工作。

我想这样做，以便在加载页面时显示conditinal字段，并预先选择在#employer的下拉列表中选择的选项（这是通过PHP完成的）。

我尝试删除$('tr#other-employer').hide();，但是无论下拉字段是否是其他字段，这都会显示加载条件字段。

这里有一个简单的示例页面：http://brenda.upreach.org.uk/beta/form.php

$(document).ready(function () {
    $('tr#other-employer').hide();
    $('#employer').change(function () {
        if ($(this).val() == "Other") {
            $('tr#other-employer').fadeIn();
        } else {
            $('tr#other-employer').hide();
        }
    });
});

任何帮助都非常感谢！

Answer 1

您可以添加if条件，如下所示，检查选择框的状态并执行必要的操作。

$(document).ready(function () { 
  $('tr#other-employer').hide();    



    /*********************************/

      if($("select#employer").val() == "Other")
      {          $('tr#other-employer').fadeIn();  }  

    /*********************************/

$('#employer').change(function () {
if ($(this).val() == "Other") {
$('tr#other-employer').fadeIn();
} else {
$('tr#other-employer').hide();
}
});
});

您还可以使用
从jquery设置选择框默认选项
$（ “选择＃雇主”）VAL（ “其它”）;

Answer 2

我不确定我是否完全理解这个问题，但如果您正在寻找此代码提供的相同功能，但如果不需要操作，则只需删除.change()函数，然后将其换出id为this：

$(document).ready(function () {
    $('tr#other-employer').hide();
    if ($('#employer').val() == "Other") {
       $('#other-employer').fadeIn();
    }
});

编辑：

上面应该有效，给定以下HTML（我已从两者中删除了表格代码以简化说明）：

<form>
    <select id="#employer">
        <option value="Foo">Foo</option>
        <option value="Other" selected="selected">Other</option>
    </select>
    <select id="#other-employer">
        <option value="Foo">Bar</option>
    </select>
</form>

鉴于上述代码，只有在加载时预先选择“其他”选项时，才会显示#other-employer下拉列表。

在加载时显示条件表单字段，并在预选时显示

2 个答案: