423,682 Members | 1,649 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 423,682 IT Pros & Developers. It's quick & easy.

javascript function to return selected item value from drop-down

P: n/a
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(\'dd lQuery\',\'\')', 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

May 21 '07 #1
Share this Question
Share on Google+
7 Replies


P: n/a
VK
On May 21, 2:19 pm, pardesiya <zenst...@gmail.comwrote:
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(\'dd lQuery\',\'\')', 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.

May 21 '07 #2

P: n/a
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" />


May 21 '07 #3

P: n/a
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)
May 21 '07 #4

P: n/a
VK
On May 21, 2:58 pm, pardesiya <zenst...@gmail.comwrote:
<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('ddlQue ry'));"
id="cmdShow" />
May 21 '07 #5

P: n/a
On May 21, 5:26 am, "Evertjan." <exjxw.hannivo...@interxnl.netwrote:
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);

};

May 21 '07 #6

P: n/a
scripts.contact wrote on 21 mei 2007 in comp.lang.javascript:
On May 21, 5:26 am, "Evertjan." <exjxw.hannivo...@interxnl.netwrote:
>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!
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
May 21 '07 #7

P: n/a
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.comwrote:
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('ddlQue ry'));"
Thanks VK.

May 22 '07 #8

This discussion thread is closed

Replies have been disabled for this discussion.