Question

My html form has optional items to display as follows:

<span class="Optional Command1 Command2">
   <label for="elem1">Elem 1:</label><input type="text" id="elem1" /><br />
</span>
<span class="Optional Command1 Command3">
    <label for="elem2">Elem 2:</label><input type="text" id="elem2" /><br />
</span>

An html select element is used to select Command1, Command2 or Command3 which corresponds to the class for the above html elements.

When the select change event happens, it calls the following function:

function showOptional(commandName) {
   $('.Optional').hide();  // clear out optional inputs
   $('.Optional').filter('.' + commandName).show();  // show relvant inputs
}

However for Command1, which is included in the class for both elem1 and elem2 above, only the first input element will be displayed, but I thought the jQuery selector would apply both.

In other words, for the above html the showOptional(‘Command1’) Javascript function only displays the first span with Command1, but not the second span with Command1. Why not both?

Answer 1

This works for me:

function showOptional(commandName) {
   $('.Optional').hide();  // clear out optional inputsinputs
   $('.Optional.' + commandName).show();  // show relvant 
}

showOptional('Command1');​

Fiddle: http://jsfiddle.net/sYXuM/1/

---

However, your original approach works for me as well: http://jsfiddle.net/sYXuM/2/

---

I just ran a performance test and the following code is faster than your original approach and my suggestion above:

function showOptional(commandName) {
   $('.Optional').hide().filter('.' + commandName).show();
}