Un-hide an element with 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);