CODEWITHSUNDEEP
javascriptjqueryruby-on-railshaml
Jyoti Ranjan Pattnaik
Jyoti Ranjan Pattnaik

Reputation: 713

Show/hide div onchange of drop down menu

I have the code for a dropdown menu in a form using haml

= f.select :contact_type, options_for_select(['String','Email','Phone','Textarea','Boolean', 'Multi Select'],
 selected: @contact_object.contact_type), onchange: "showDiv(this, @i)"
- if @contact_object.contact_type == 'Boolean'
  %div{:id=>"options_for_boolean_#{@i}"}
    %li
      =f.label :first_boolean_option do
        Field
        %span{:class => "item-number"}
          =@i
        First opt.
      =f.text_field :first_boolean_option, :placeholder => "Enter First option:"
    %li
      =f.label :second_boolean_option do
        Field
        %span{:class => "item-number"}
          =@i
        First opt.
      =f.text_field :second_boolean_option, :placeholder => "Enter Second option:"
- if @contact_object.contact_type == 'Multi Select'    
  %div{:id=>"options_for_multiselect_#{@i}"}
    %li
      =f.label :multiselect_options do
        Field
        %span{:class => "item-number"}
          =@i
        Multiselect opt.
      =f.text_area :multiselect_options, :placeholder => "Enter all options separated with comma:"

Here @i is the iterator value. What I am trying to do here is, the above code is in a loop. Each loop has a drop down menu with selected value. When user selects Boolean or Multi select option, it will show him respective div for more details. So if a user chooses Boolean option of 2nd drop down box, it should show div for boolean in 2nd iterated layer. Confused? here is simpler explanation

drop-down-box1
  div1 for boolean
  div1 for multi select

drop-down-box2
  div2 for boolean
  div2 for multi select

drop-down-box3
  div3 for boolean
  div3 for multi select

*All divs are hidden by default. if a user selects "boolean" of "drop-down-box2", it should show "div2 for boolean" How to do it?

My jQuery code till now is

:javascript
$(document).ready(function() {
  function showDiv(changing,numb) {
    var sel_val = changing.options[changing.selectedIndex].val();
    if (sel_val == 'Boolean') {
      $('#options_for_boolean_' + numb).show();
    } else if (sel_val == 'Multi Select') {
        $('#options_for_multiselect_' + numb).show();
    } else {
        $('#options_for_boolean_' + numb ).hide();
        $('#options_for_multiselect_'+ numb).hide();
    } 
  }
});

Upvotes: 0

Views: 2799

Answers (1)

Jyoti Ranjan Pattnaik
Jyoti Ranjan Pattnaik

Reputation: 713

Actually the problem was in the haml code for select tag, onchange event is not triggered properly. we can call this issue as "onchange html option is not appearing in the browser".

This below concept helped me a lot.

:onchange is an html_option. Here's the syntax for select:

**

select(object, method, choices, options={}, html_options={})

**

So in my case:

= f.select :contact_type, options_for_select(['String','Email','Phone','Textarea','Boolean', 'Multi Select'], selected: @contact_object.contact_type),{},
  :onchange => "showDiv(#{@i});"

Notice the empty hash in there to represent the options. moreover, I changed my javascript code to this below

:javascript
$(document).ready(function() {
  function showDiv(numb) {
    var sel_val = $('#userservicepage_contactsettings_attributes_' + numb + '_contact_type').val();
    if (sel_val == "Boolean") {
      $('#options_for_boolean_' + numb).show();
    } else if (sel_val == "Multi Select") {
      $('#options_for_multiselect_' + numb).show();
    } else {
      $('#options_for_boolean_' + numb ).hide();
      $('#options_for_multiselect_'+ numb).hide();
    }
  }
});

As a result the whole thing become dynamic.

Upvotes: 1

Related Questions