使用Javascript取消隐藏元素

Question

I have two options for select. I am trying to get it to where if the user selects "Case Manager" for option for select #1, then option for select #2 appears (it is currently hidden from the user).

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)

The Haml appears to be correct, but I can't get the Javascript to correctly unhide option for select #2. Any ideas?

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

Answer 1

You might consider using jQuery's awesome .toggle() method. By itself, it will hide an element if it's currently being shown and show it if it's currently being hidden. This isn't exactly what you want.

But .toggle() also has a secret power. You can pass it a boolean as an argument. If that boolean is truthy, then it will show the element and if it's falsey, it will hide the element.

You could keep the input as a text field the entire time and just hide it (using the style="display: none;" attribute) by default or with JavaScript on page load.

Then you could use some code like this:

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

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

Answer 2

This line is not right $("#duplicate_claim_manager_secondary).setAttribute(type => text)

setAttribute syntax:

element.setAttribute(name, value);

To change an attribute use: $("#duplicate_claim_manager_secondary).setAttribute("type", "text")

References:

• w3schools
• MDN

But to actually hide or show an element, you are better off changing the css display property - with jQuery that is:

$("#duplicate_claim_manager_secondary").show()

and

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

Answer 3

I don't know if this was a simple transcription error, but you're missing a closing quote in the following block:

This:

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

Should be this:

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

To make an object visible, remove the display css attribute or set it to your desired mode. To make an object invisible set its css display attribute to none.

Standard 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