Question

I have a form like this:

<%= form_tag project_configure_select_path , :method => :put do %>
Select The Type Of Project<%= select_tag "type", "<option>Agile</option><option>Sales</option>".html_safe %>
<br/>
<label class="agile"> 
    <%= check_box_tag 'modules_enabled[]', "time_tracking", false, :id => "project_enabled_module_names_time_tracking", :checked => "checked", :type => "hidden" %>
    <%= check_box_tag 'modules_enabled[]', "issue_tracking", false, :id => "project_enabled_module_names_issue_tracking", :checked => "checked", :type => "hidden" %>
    <%= check_box_tag 'modules_enabled[]', "wiki", false, :id => "project_enabled_module_names_wiki", :checked => "checked", :type => "hidden" %>
    <br/>
</label>
<label class="sales"> <%= check_box_tag 'modules_enabled[]', "news", false, :id => "project_enabled_module_names_news", :checked => "checked", :type => "hidden" %> </label>
<br/>
<%= submit_tag 'Submit'%>
<% end %> 

I want to put a condition here. That’s if I select the option Agile from the select tag then the label class=”agile” has to work else if it is sales then the other block of label below it called class = “sales” has to work.

I am not storing any of these in the database. So I want the particular block to be selected depending on my option.

Thanks a lot

Answer 1

You will need some Javascript to do this. (I’ll use jQuery because it comes as standard).

Add some values onto your option elements (eg. <option value="agile">Agile</option>) and some JS like the following:

(this can probably be optimized somewhat)

// By default, both should be hidden
$('label.agile, label.sales').hide(); 

$('select#type').change(function() {
    $('label.agile, label.sales').hide(); 

    // Show the label with the class that matches the selected option
    $('label.'+$(this).val()).show(); 
});