使用Javascript取消隐藏一个元素

Question

我有两个选择选项。我正在尝试让用户如果选择了“案例经理”作为选择#1的选项，则会出现选择#2的选项（目前对用户隐藏）。

Haml：

= form_tag app_configurations_path, :method=> 'put' do |f|
  -@all_configurations.each do |config|
      =hidden_field_tag "config_ids[]", config.id
      %label= t('workflow.duplicate_claim_manager')
      = select_tag('duplicate_claim[case_manager]', options_for_select(@case_managers_drop_down, config.configuration_value),name: "config[#{config.id}]", :include_blank => true)

      %label.hidden(for="duplicate_claim_manager_secondary")
      = hidden_field('duplicate_claim_manager_secondary', options_for_select(@case_managers_drop_down, config.configuration_value),name: "config[#{config.id}]", :include_blank => true)

Haml看起来是正确的，但我无法正确地显示JavaScript，以便为选择#2取消隐藏选项。有什么想法吗？

if ($("#duplicate_claim_case_manager :selected").text() == "Case Manager") {
   $("#duplicate_claim_manager_secondary).setAttribute(type => text)
}

- Mdjon26

---

你想显示/隐藏一个选项还是选择框？ - ArJ

Answer 1

你可以考虑使用jQuery强大的.toggle()方法。它本身会隐藏一个元素，如果它当前正在显示，则显示它，如果当前正在隐藏，则隐藏它。这不完全是你想要的。

但是.toggle()还有一个秘密功能。您可以将布尔值作为参数传递给它。如果该布尔值为真，则显示该元素；如果为假，则隐藏该元素。

你可以一直将输入保留为文本字段，并默认隐藏它（使用style =“display：none;”属性），或在页面加载时使用JavaScript隐藏它。

然后，您可以使用以下代码：

var isCaseManager = $("#duplicate_claim_case_manager :selected").text() === "Case Manager";

$("#duplicate_claim_manager_secondary").toggle(isCaseManager);

- Steve Kinney

Answer 2

这行代码不正确：$("#duplicate_claim_manager_secondary).setAttribute(type => text)

setAttribute 语法：

element.setAttribute(name, value);

要更改属性，请使用：$("#duplicate_claim_manager_secondary).setAttribute("type", "text")

参考资料：

• w3schools
• MDN

但是，要实际隐藏或显示元素，最好更改 CSS 的 display 属性 - 使用 jQuery：

$("#duplicate_claim_manager_secondary").show()

并且

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

- Velimir Tchatchevsky

Answer 3

我不知道这是否是一个简单的转录错误，但在以下代码块中您缺少了一个闭合引号：

这个：

if ($("#duplicate_claim_case_manager :selected").text() == "Case Manager") {
    $("#duplicate_claim_manager_secondary).setAttribute(type => text)
}

应该是这样的：

if ($("#duplicate_claim_case_manager :selected").text() == "Case Manager") {
    $("#duplicate_claim_manager_secondary").setAttribute(type => text); //Added closing quotation mark
}

为了使对象可见，移除 display CSS 属性或将其设置为所需的模式。为了使对象不可见，将其 CSS display 属性设置为 none。

标准 JavaScript：

document.getElementById("duplicate_claim_manager_secondary").style.display = "none"; //Hide
document.getElementById("duplicate_claim_manager_secondary").style.display = "";     //Make Visible

jQuery：

$("#duplicate_claim_manager_secondary").toggle(); // Toggle visibility

//Or...

$("#duplicate_claim_manager_secondary").show(); // Make Visible
$("#duplicate_claim_manager_secondary").hide(); // Hide

- Robert