Question

I have a page with a drop down with 3 items:

<select name="orderOption" id="orderOption">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option> 
</select>

Currently there is Javascript to show or hide a div with the appropriate class, based on that selection.

function orderOptionChanged() {
        var e = document.getElementById("orderOption");
        var orderOption = e.options[e.selectedIndex].value;

        if (orderOption == "1") {
            $('.OrderOption1').show();
            $('.OrderOption2,.OrderOption3,').hide();
        }

This works fine for just the 3 of them, but now they want 25 of them. I need a way to select only the one option without having to write it all out. I’ve never worked with Javascript before, so this is all new to me.

Answer 1

var orderOption = e.options[e.selectedIndex].value;
$('*[class^="OrderOption"]').hide();
$('.OrderOption'+orderOption).show();

You could also assign a base class to all of them, and use that to call .hide(), as the current method has to go through ALL elements and check for their class.

class^="OrderOption" – This line selects all elements with a class “beginning with OrderOption”.

'.OrderOption'+orderOption – Then we append the value from above onto another selector to select the appropriate OrderOption.