Home/ Questions/Q 731257
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T07:00:21+00:00

I am working on a search box that displays different options based on a

  • 0

I am working on a search box that displays different options based on a users selection via dropdown box. Basically I need a really clean, light-weight method for switching out different divs without reloading the page. Im new to JS, but I know enough that there should be some really simple way of setting the display property using JS – Im just not totally sure how to go about it. Any help would be really appreciated, thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Not using jQuery, here’s a little something that can do it. Real basic DOM stuff, but anyway…
    It is commented to death, but in general you give it a container id (in which your elements to show/hide are), and then some hide-all-then-show-one-of-them is done in the select element’s onchange. The way to retrieve element to show is basename+suffix (and the suffix is the value of the select’s option for a corresponding element).

    Here: 

    <body>

<select id="mySelect" onchange="npup.doSelect(this);">
    <option value="">Npup says 'select'</option>
    <!-- the option values are suffixes for the elements to show -->
    <option value="0">zero</option>
    <option value="1">one</option>
    <option value="2">two</option>
</select>
<!-- container for any elements that are to be in the game -->
<div id="mySpecialElements">
    <!--  these have ids that end with and index  for easy retrieval in "findeElement" function  below-->
    <div id="npup0" class="hidden">div 0</div>
    <div id="npup1" class="hidden">div 1</div>
    <div id="npup2" class="hidden">div 2</div>
</div>

<script type="text/javascript">

window.npup = (function (containerId, baseId) {
    // save the container of your special element
    var elementsContainer = document.getElementById(containerId);
    function doSelect(select) {
        // get value of select
        var value = select.value;
        // find element based on the value of the select
        var selected = findElement(value);
        if (!selected) {return;} // didn't find the element, bail
        // do hiding/showing of elements
        hideAll(elementsContainer);
        showElement(selected);
    }
    // retrieve some element based on the value submitted
    function findElement(value) {
        return document.getElementById(baseId+value);
    }
    // hide all element nodes within some parent element
    function hideAll(parent) {
        var children = parent.childNodes, child;
        // loop all the parent's children
        for (var idx=0, len = children.length; idx<len; ++idx) {
            child = children.item(idx);
            // if element node (not comment- or textnode)
            if (child.nodeType===1) {
                // hide it
                child.style.display = 'none';
            }
        }
    }
    // display a certain element
    function showElement(element) {
        element.style.display = '';
    }
    // hide all on page load (might want some extra logic here)
    hideAll(elementsContainer);

    // export api to use from select element's onchange or so
    return {
        doSelect: doSelect
    };
})('mySpecialElements', 'npup'); // give the routine a container id of your special elements, and the base id of those elements
</script>
</body>
    • 0