Javascript passing option's value to a function

4 posts · originally from https://geek.digit.in/community/threads/javascript-passing-options-value-to-a-function.135430/

HI, I am making a site for which require a bit of javascript magic. asking for your help because I am still learning javascript.

Javascript Code -

Code:

 function changeMap()
    {
       imagesource =  "*maps.google.com/maps/api/staticmap?size=500x500&maptype=hybrid&zoom=16&sensor=false&markers=color:blue|label:K|28.541250,77.204100" ;
       mapimage.src  = imagesource ;
    }

Html code -

Code:

 <select name="choose_colony" id="choose_colony" size="8" onchange="changeMap()" style="float: left;">
        <option value="1" >Big apartments</option> 
        .
        .
        <option value="999">plaza</option>
        </select>
        <img name="mapimage" src="" alt="Select your Colony" style="float: right;">

In this whenever a selection on the listbox is made changeMap() is called and an image is loaded. What I want to do is, pass the 'value' of the <option> selected, to the function changeMap , so that it can be used there.
How ?
thanks

Edit: nvmind, I found a solution:
changemap has to be changed to -

changeMap(this.options[this.selectedIndex].value)

I still don't understand why this works though..

Because this is the proper way of doing. For all elements in HTML, this.value will get the value of the current element and for a option box u have to use what u posted above, or simple this.value will do.

Before doing anything big, please learn some good old basic Javascript, so that its easy for you in further development.

Also go through DOM Model in Javascript which is used to acces various element values in the form or on the page you have designed in HTML.

Simply put, DOM Model helps you access the variuos form elements in a logical heirarchical manner. <this.value> although acts as a shortcut and will work in all cases but the proper way to access would be in a somewhat logical statement such as:

document.<form name>.<element name>.<value> where form name,element name and value would be custom names assigned by you to the elements in the "id" attribute of tags. Hope that helps

"this" is a keyword for referencing to the current instance of the object..in your case it is listbox..

Check out this article about this Javascript - The this keyword