0

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

我想让它在加载页面时显示条件字段，并且在下拉列表中选择的选项#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();
        }
    });
});

非常感谢任何帮助！

4

2 回答 2

2

您可以添加如下 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 设置选择框默认选项

$("select#employer").val("其他");

于 2013-10-31T10:59:07.323 回答
0

我不确定我是否完全理解这个问题，但是如果您正在寻找此代码提供的相同功能，但不需要该操作，那么只需删除该.change()功能，然后换掉thisid：

$(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 下拉列表。

于 2013-10-31T10:34:58.857 回答