javascript function to return selected item value from drop-down

[pardesiya]

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]

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.

<script type="text/javascript">
function __doPostBack(elm) {
var val = elm.options[elm.selectedIndex].value;
window.alert(val);
}
</script>


<select name="ddlQuery" id="ddlQuery" onchange="__doPostBack(this)">
<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]

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:

<script type="text/javascript">
function fShowCity(elm)
{
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" />

 

[Evertjan.]

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');"

 

[VK]

<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:

<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'));"
id="cmdShow" />

 

[scripts.contact]

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.]

scripts.contact wrote on 21 mei 2007 in comp.lang.javascript:

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);

};

Yes!

 

[pardesiya]

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.

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.