javascript function to return selected item value from drop-down

pardesiya

unread,

May 21, 2007, 6:19:12 AM5/21/07

to

Friends,

I need to write a javascript function (which will be called on
clicking a button) to return the currently selected item from a drop-
down list whose rendered html is below.

<select name="ddlQuery"
onchange="javascript:setTimeout('__doPostBack(\'ddlQuery\',\'\')', 0)"
id="ddlQuery" style="width:273px;">
<option value="Munich">Munich</option>
<option selected="selected" value="London">London</option>
<option value="Paris">Paris</option>
<option value="Tokyo">Tokyo</option>
</select>

So in the above case, the javascript should return the string 'London'
which is the selected item.

Can you please advice?

Thanks,
PD

VK

unread,

May 21, 2007, 6:29:53 AM5/21/07

to

<option value="Munich">Munich</option>
<option selected="selected" value="London">London</option>
<option value="Paris">Paris</option>
<option value="Tokyo">Tokyo</option>
</select>

P.S. The intrinsic onchange handler gets a reference to Javascript
function, it has nothing to do with a link to javascript: pseudo-
protocol, thus onchange="javascript:something()" is a non-sense.

pardesiya

unread,

May 21, 2007, 6:58:05 AM5/21/07

to

Thanks a lot VK. Sorry I wasnt very clear. We can ignore
onchange="javascript:....". If it's of any interest, that's just the
generated html from my asp.net aspx page. What I needed was the
required function to be called on click of a button.

Your solution has pointed me to the right direction and I am able to
achieve this as below:

{
var val = elm.options[elm.selectedIndex].value;
window.alert(val);
}
</script>

<option value="Munich">Munich</option>
<option selected="selected" value="London">London</option>
<option value="Paris">Paris</option>
<option value="Tokyo">Tokyo</option>
</select>

Evertjan.

unread,

May 21, 2007, 7:26:32 AM5/21/07

to

pardesiya wrote on 21 mei 2007 in comp.lang.javascript:

> Thanks a lot VK. Sorry I wasnt very clear.

You are not very clear now, as you do not quote!!!!!!!!!!
This is usenet, not email.

> We can ignore
> onchange="javascript:....". If it's of any interest, that's just the
> generated html from my asp.net aspx page. What I needed was the
> required function to be called on click of a button.
>
> Your solution has pointed me to the right direction and I am able to
> achieve this as below:
>
> <script type="text/javascript">
> function fShowCity(elm)

elm is a local variable containing the litteral string 'ddlQuery',
and only under IE this is convered to an object pointer to your select.

to make it cross browser compatible write:

function fShowCity(elm2) {
var elm = document.getElementById('elm2');
alert(elm.options[elm.selectedIndex].value);
};

> {
> var val = elm.options[elm.selectedIndex].value;
> window.alert(val);
> }
> </script>
>
> <select name="ddlQuery" id="ddlQuery" style="width:273px;">
> <option value="Munich">Munich</option>
> <option selected="selected" value="London">London</option>
> <option value="Paris">Paris</option>
> <option value="Tokyo">Tokyo</option>
> </select>
>
> <input type="submit" name="cmdShow" value="Customize Fields"
> onclick="fShowCity(ddlQuery);" id="cmdShow" />

ddlQuery is not a variable name but a string so it should be quoted.

onclick="fShowCity('ddlQuery');"

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

VK

unread,

May 21, 2007, 7:27:22 AM5/21/07

to

On May 21, 2:58 pm, pardesiya <zenst...@gmail.com> wrote:

> <input type="submit" name="cmdShow" value="Customize Fields"
> onclick="fShowCity(ddlQuery);" id="cmdShow" />

This way of calling function relies on IE-proprietary extension with
ID'ed element automatically reflected as global JScript variables:
http://www.jibbering.com/faq/index.html#FAQ4_41

While Gecko browsers in quirk mode do support this feature now as
well, you should not rely on it on a wide run. Use the fully universal
DOM 0 methods - the best - instead or the conventional DOM 1 methods:

or

scripts.contact

unread,

May 21, 2007, 4:30:34 PM5/21/07

to

On May 21, 5:26 am, "Evertjan." <exjxw.hannivo...@interxnl.net> wrote:
> to make it cross browser compatible write:
>
> function fShowCity(elm2) {
> var elm = document.getElementById('elm2');
> alert(elm.options[elm.selectedIndex].value);
>
> };

function fShowCity(elm2) {
var elm = document.getElementById(elm2);
alert(elm.options[elm.selectedIndex].value);

};

Evertjan.

unread,

May 21, 2007, 5:33:43 PM5/21/07

to

Yes!

pardesiya

unread,

May 21, 2007, 9:24:18 PM5/21/07

to

On May 21, 5:26 am, "Evertjan." <exjxw.hannivo...@interxnl.net>
wrote:

> You are not very clear now, as you do not quote!!!!!!!!!!

> This is usenet, not email.

Apologies again. I am a newbie in usenet. Will henceforth quote.

> to make it cross browser compatible write:
>
> function fShowCity(elm2) {

> var elm = document.getElementById(elm2);
> alert(elm.options[elm.selectedIndex].value);
> };

Thanks for the cross browser compatible tip.

On May 21, 8:27 am, VK <schools_r...@yahoo.com> wrote:

> This way of calling function relies on IE-proprietary extension with
> ID'ed element automatically reflected as global JScript variables:http://www.jibbering.com/faq/index.html#FAQ4_41
>
> While Gecko browsers in quirk mode do support this feature now as
> well, you should not rely on it on a wide run. Use the fully universal
> DOM 0 methods - the best - instead or the conventional DOM 1 methods:
>
> <input type="button" name="cmdShow" value="Customize Fields"
> onclick="fShowCity(this.form.elements['ddlQuery']);" id="cmdShow" />
>
> or
>

> <input type="button" name="cmdShow" value="Customize Fields"
> onclick="fShowCity(document.getElementById('ddlQuery'));"

Thanks VK.