Javascript Select Option

In this blog post, I will explain how to get value from the Javascript select option. Javascript get select option is a function that allows you to read the selected input text of an <select> element in JavaScript and return its value as a string. This is done by assigning an event listener for the change event on the element.

Javascript select option

There are plenty of ways to use JavaScript select option. The option which is selected can be accessed by using the event handler onchange, or another function could do it after a click like document.getElementById(“id”). There is also an input type=” text” that has been added in HTML5 and this allows you to get the value with just one line of code because no button needs pressing anymore!

The value Property:

The value of the javascript select option can be obtained from JavaScript following these steps:

var sel = document.getElementById('select');

console.log( sel.value );

The text content of an option element is called the “value property” if it has a value attribute. If not, then Internet Explorer prior to version 9 will call the text its own word for this concept: “property.” This can be confusing when you are using both IE and modern browsers! For best results use selectedIndex on older versions or just include a quote in your options with no quotes around them.

The selectedIndex Property

It’s so satisfying to select your favorite option in a list. The selectedIndex property will tell you where it is, with the first one being at index 0. So if my pick was number 1 for example:

var opt = sel.options[sel.selectedIndex];

And now you can access the option’s value, text, or other properties. You would also want to know about how dynamic options and an array of values work.

console.log( optn.value );
console.log( optn.text );

The options property of the select list is a node list that contains all the option elements inside it. The selectedIndex property in turn specifies where you can find your chosen choice, and also has some data such as text which includes what will be seen on screen when clicked upon an item from this menu.

for Loop to Obtain Selected Option

With a for loop, you can iterate through all the possible options of any select list to find which is selected. To get just that value or reference back from your function, it’s as easy as defining a new one-line function with an input and output parameter:

function getSelectedOption(abc) {
    var optn;
    for ( var i = 0, len = abc.options.length; i < len; i++ ) {
        optn = abc.options[i];
        if ( opt.selected === true ) {
            break;
        }
    }
    return optn;
}

// get selected option in sel (reference obtained above)
var opt = getSelectedOption(sel);

// display its value and text
console.log( optn.value );
console.log( optn.text );

Selecting one option from a select list can be difficult, so it’s helpful to make your options easy for the user. This function will return only what you’re looking for!

A Complete Example:

<form action="#" method="post" id="demoForm" class="demoForm">
  
            <select id="scripts" name="scripts">
                <option value="JavaScript">JavaScript</option>
                <option value="Php">PHP</option>
                <option value="Python">Python</option>
               </select>
            
       

  </form>
<script>

function getSelectValue() {
    
    // get references to select list and display text box
    var sel = document.getElementById('scripts');
    var el = document.getElementById('display');


    function getSelectedOption(sel) {
        var opt;
        for ( var i = 0, len = sel.options.length; i < len; i++ ) {
            opt = sel.options[i];
            if ( opt.selected === true ) {
                break;
            }
        }
        return opt;
    }

    // assign onclick handlers to the buttons
    document.getElementById('showVal').onclick = function () {
        el.value = sel.value;    
    }
    
    document.getElementById('showTxt').onclick = function () {
        // access text property of selected option
        el.value = sel.options[sel.selectedIndex].text;
    }

    document.getElementById('doLoop').onclick = function () {
        var opt = getSelectedOption(sel);
        el.value = opt.value;
    }
    
}());
</scrpit>

Conclusion:

What are the best ways to get value from Javascript select options? While there is no one single way, we at Netology have come up with a few tips and tricks that can help you. They range in complexity – some require just an extra line of code while others involve more time and coding experience.

The goal is always to make your life easier so start by looking for solutions that fit into your workflow seamlessly. 

Also Read: JavaScript: Format Number With Commas

Follow us on Facebook

Leave a Comment