f.select + javascript to add and remove div styles from select menu

Question

I an fairly new to Rails and very new to Javascript.
I am trying to change the display style on a div class using an f.select menu. I'm trying to only show the secondary menus if their related value is set on the select menu.

The form is for picking types of furniture. The primary select has 3 options: tables, chairs, and couches. If "table" is selected, then I want to be able to show another menu of types of tables (drop leaf, coffee, end..etc).

I am using the Select2 gem...so that might be relevant. I can make this work with regular old HTML select menus...but not f.select. here is my code

CSS

#tableObject, #chairObject, #couchObject {
display:none;
}

form

    <%= f.select :furniture, options_for_select([
['FURNITURE TYPES' ,''],

['Chairs' ,'Chairs'],
['Tables' ,'Tables'],
['Couches' ,'Couches']

    ]), {}, { style: 'width:300px', id: 'furnitures'} %>

<div id="couchObject">
    "List of Couches"
</div>

<div id="chairObject">
    "List of Chairs"
</div>

<div id="tableObject">
    "List of Tables"
</div>

javascript

<script>
  $('#furnitures').change(function() {
    if ( $(this).val() == 'Chairs') $('#chairObject').css('display', 'block');
    else $('#chairObject').css('display', 'none');

});
   $('#furnitures').change(function() {
    if ( $(this).val() == 'Couches') $('#couchObject').css('display', 'block');
    else $('#couchObject').css('display', 'none');

});

    $('#furnitures').change(function() {
    if ( $(this).val() == 'Tables') $('#tableObject').css('display', 'block');
    else $('#tableObject').css('display', 'none');

});

 </script>

UPDATE: HTML OUTPUT

<div class="select2-container" id="s2id_titles" style="width: 300px;"><a href="javascript:void(0)" class="select2-choice" tabindex="-1">   <span class="select2-chosen" id="select2-chosen-2">Tables</span><abbr class="select2-search-choice-close"></abbr>   <span class="select2-arrow" role="presentation"><b role="presentation"></b></span></a><label for="s2id_autogen2" class="select2-offscreen"></label><input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true" role="button" aria-labelledby="select2-chosen-2" id="s2id_autogen2"></div><select style="width: 300px; display: none;" id="titles" name="participant[title]" tabindex="-1" title=""><option value="">Furnitures</option>
<option value="Tables">Tables</option>
<option value="Chairs">Chairs</option>
<option value="Couches">Couches</option>
</select>
</div>

<div id="couchObject">"List of Couches"</div>
<div id="chairObject">"List of Chairs"</div>
<div id="tableObject">"List of Tables"</div>

I've posted the html output...also I'm using Select2 ...which I should have mentioned. — NothingToSeeHere
this worked. please put that new javascript in an answer so I can give you credit. Thank you. — NothingToSeeHere

Arun P Johny Arun P Johny · Accepted Answer · 2015-03-16T04:14:09

Try

$('#furnitures').select2({}).on('change', function () {
    var val = $(this).select2('val');
    $('#couchObject').toggle(val == 'Couches');
    $('#chairObject').toggle(val == 'Chairs');
    $('#tableObject').toggle(val == 'Tables');
});

Demo: Fiddle

f.select + javascript to add and remove div styles from select menu

1 Answers