Dropdown in Ruby on Rails: show some other fields, buttons... depending on the selection - ruby-on-rails

Question

I'm working on a view. The view has a dropdown menu and i want to add other fields to the view, depending on the index i selected in the dropdown.
http://abload.de/image.php?img=unbenanntcajcc.png
at ... i want to show other stuff like textfields. (i'm using bootstrap for styling)
thats the code:
<div class="col-md-4">
<div style="height: 452px; overflow: auto">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Select a Filter <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>First name</li>
<li>Last name</li>
<li>Occupation</li>
<li>Location: Birth</li>
<li>Location: Marriage</li>
<li>Location: Death</li>
<li>Location: Burial</li>
<li>Time: Birth</li>
<li>Time: Marriage</li>
<li>Time: Death</li>
<li>Time: Burial</li>
<li>Relatives </li>
</ul>
</div>
<br />
...
<br />
<button type="button" class="btn btn-success">+</button>
<br />
<br />
<button type="button" class="btn btn-default">Add filter</button>
</div>

Answer 1

You want something like this:
add classes to your different anchor tags in the dropdown menu like so:
<ul class="dropdown-menu" role="menu">
<li><a class="firstname" href="#">First name</a></li>
</ul>
<div class="stuffIwanttoadd"></div>
Then in a javascript file have something like:
$("a.firstname").click(function(event) {
event.preventDefault();
$("div.stuffIwanttoadd").innerHTML="<p>Here is some stuff I want to add</p>";
});
and do that for each element of the list (you should wrap the javascript in a function to make this easier).
EDIT: to get the javascript to run you'll need to attach it to the page, this means registering it in a window.onpageload event (or something like that) assuming you are using turbolinks you're going to want to do that like this:
var initFunc = function() {
// everything you want to attach to the dom goes in initFunc
$("a.firstname").click(function(event) {
event.preventDefault();
$("div.stuffIwanttoadd").innerHTML="<p>Here is some stuff I want to add</p>";
});
};
$(document).ready(initFunc);
$(window).bind('page:change', initFunc);