Monkey Raptor: JavaScript: Using Select-Option Element (Demo)

Let's go see the HTML stacking:

<p>Who are you? 
    <select id="option_parent" class="option_parent">
        <option disabled selected>...</option>
        <option class="option" value="0">Hulk</option>
        <option class="option" value="1">Xena</option>
        <option class="option" value="2">not sure</option>
        <option class="option" value="3">Superman</option>
        <option class="option" value="4">Swamp Thing</option>
        <option class="option" value="5">Jane</option>
        <option class="option" value="6">Tarzan</option>
        <option class="option" value="7">a bot</option>        
        <option class="option" value="8">I don't know</option>        
    </select>
</p>

As you can see, the select is as the parent container of the option elements. And they're wrapped within a paragraph tag.

The first option is disabled and selected so that there'll be no "confusion".

Because this is more about the JavaScript demo, then let's create an output element, using the textarea. So we can see how to capture the value from each option on change event.

<div>
    <textarea 
        id="textarea_output"
        readonly
        rows="1"
        style="overflow: hidden;
                overflow-x: auto;
                width: 100%;
                font-size: 24px;
                padding: 10px;"
        placeholder="result"></textarea>
</div>

The textarea output is wrapped within a div so it will be nicely displayed as block element.
The CSS should be declared in separate style tag. This is for quick example purpose.

From the stacking above, pay attention at the id, class, and value attributes. We'll gonna need those later in our JavaScript (and CSS; for styling them — this topic can be found on another place).

Now the JavaScript:

(function (d) { //d is document object.
    "use strict"; //ECMA5 directive (strict mode)
    var select, textarea, option; //variables.
    
    //this function is for getting the element(s).
    function q(a) {
        return d.querySelectorAll(a);
    }

    //initialize the elements.
    select = q("#option_parent")[0]; //just one.
    textarea = q("#textarea_output")[0]; //just one.
    option = q(".option"); //nodelist (array-like).
    
    //define the function to handle the event capture.
    function theHandl(e) {
        var whichOne = Number(e.target.value), //the value of each option; to Number.
            text = option[whichOne].innerHTML; //the text (innerHTML) of each option.            
        if (whichOne < 8) {
            textarea.value = "I'm " + text;
        } else {
            textarea.value = text;
        }
    }
    
    //define the event capture; using "change" (on method).
    select.onchange = theHandl;        
    /* Or, addEventListener method:
    ----------------------------------------------
    select.addEventListener("change", theHandl, 0);
    ----------------------------------------------
    */
}(document));

The above example is an anonymous auto-invoked function.
If you want it to get triggered from some other preceding event(s), you'll need to give a name to the function block, then call it on your custom event(s).

DEMO

Who are you?

All demo codes combined:

<!--INPUT-->
<p>Who are you? 
    <select id="option_parent" class="option_parent">
        <option disabled selected>...</option>
        <option class="option" value="0">Hulk</option>
        <option class="option" value="1">Xena</option>
        <option class="option" value="2">not sure</option>
        <option class="option" value="3">Superman</option>
        <option class="option" value="4">Swamp Thing</option>
        <option class="option" value="5">Jane</option>
        <option class="option" value="6">Tarzan</option>
        <option class="option" value="7">a bot</option>        
        <option class="option" value="8">I don't know</option>        
    </select>
</p>

<!--OUTPUT-->
<div>
    <textarea 
        id="textarea_output"
        readonly
        rows="1"
        style="overflow: hidden;
                overflow-x: auto;
                width: 100%;
                font-size: 24px;
                padding: 10px;"
        placeholder="result"></textarea>
</div>

<!--CONTROLLER-->
<script>
    (function (d) {
        "use strict";
        var select, textarea, option;
        function q(a) {
            return d.querySelectorAll(a);
        }
        select = q("#option_parent")[0];
        textarea = q("#textarea_output")[0];
        option = q(".option");
        function theHandl(e) {
            var whichOne = Number(e.target.value),
                text = option[whichOne].innerHTML;         
            if (whichOne < 8) {
                textarea.value = "I'm " + text;
            } else {
                textarea.value = text;
            }
        }
        select.onchange = theHandl; 
    }(document));
</script>

Closing

Anyway, the disabled and selected for the first option is optional. It's more formal that way.

The innerHTML is a shortcut method to get the text of each option.
But it can be substituted with an actual attribute. For instance, name or maybe others (data-*, id, etc).
Then use the getAttribute() method to get the value of that particular attribute.

The use of number as the value for each option can also be replaced with strings. Then you need to change the way to get the index of each option.
It's flexible for tinkering.

The cross-browser event for capturing the state-change of this element is change event.
For input event, it works on Chrome (and latest IE — Edge), but not on Firefox (tested just now, later maybe Firefox will update that).

Links

Documentation at MSDN.
Using optgroup documentation at MSDN.
Examples for getting the selected option at W3Schools.

Monkey Raptor

Tuesday, September 29, 2015

JavaScript: Using Select-Option Element (Demo)

No comments:

Post a Comment