...

View Full Version : Identifying a selected option by its position



tpeck
11-18-2010, 02:28 AM
I have a simple form with an options drop down box:



<form method="POST" name="form">
<select autocomplete="off" id="input" name="input" onchange="this.form.submit();goHere();">
<option>Choose...</option>
<option>Question1</option>
<option>Question2</option>
<option>Question3</option>
</select>


I wish to identify the option chosen in the function but not by its value, by its position:



<script>
function goHere(){
var s = document.getElementById("input");
if (s.selectedIndex == -1) return;
var u = s.form.elements[i];
alert(u);
</script>


I was hoping that variable "u" would be either 0, 1, 2, or 3.

How can I get a variable to alert me the position of the selected option in the form? I think it is elements[i].

DrDOS
11-18-2010, 03:17 AM
You can just let the value of the option correspond to the position of the option and if need be get the data you want from an array using the value as an indice.


<option value='0'>Question1</option>
Just remember that all values are treated as strings.

glenngv
11-18-2010, 04:49 AM
You just did it!


alert(s.selectedIndex)

To make your function simpler, just pass this.

<select autocomplete="off" id="input" name="input" onchange="this.form.submit();goHere(this);">
...
function goHere(s){
alert(s.selectedIndex);
}
What do you exactly want to do? You are calling the function after form submission. It might not have enough time to execute the function as the page may have already submitted and unloaded.

tpeck
11-18-2010, 06:08 AM
Right. The problem with this solution is that assigning a value to each option means I don't have access to the text as "value". And that is a requirement for me - to have the text as "value".

Is there another solution?

glenngv
11-18-2010, 06:23 AM
tpeck, did you see my reply above? Getting the selected index is as easy as s.selectedIndex which you already have.

tpeck
11-18-2010, 07:02 AM
I see, this is almost working...

I have:



function goHere(s){
alert(s.selectedIndex);
if (s.selectedIndex == -1) return;
var v = s.selectedIndex.value;
document.getElementById('say').src='http://...blah blah blah ... '+v+'.mp3';


How do I make the variable v a value so I can use it elsewhere as above?

glenngv, you are right of course, I will have to work on the submission after the goHere function. But at the moment it hangs and can't do both the function and the submission.

glenngv
11-18-2010, 08:11 AM
If you want the selected option value, you can just do s.value. And your check for s.selectedIndex == -1 will never be satisfied since you have a single line dropdown where there is always a selected item (unlike in multi line dropdown, e.g. <select size="5">). I think you want to check for zero which is the first empty option.


function goHere(s){
alert(s.selectedIndex);
if (s.selectedIndex == 0) return;
var v = s.value;
document.getElementById('say').src='http://...blah blah blah ... '+v+'.mp3';
...
}

Philip M
11-18-2010, 08:30 AM
You can access the selected index, value and text of a select list thus:-


var si = document.getElementById("list1").selectedIndex; // using form ID
var val = document.getElementById("list1").options[si].value;
var txt = document.getElementById("list1").options[si].text;

glenngv
11-18-2010, 08:35 AM
You are right Philip but the shorter version select.value is much easier than select.options[index].value. Though you can't do select.text and its longer version is the only way to get the text.

Philip M
11-18-2010, 08:57 AM
You are right Philip but the shorter version select.value is much easier than select.options[index].value. Though you can't do select.text and its longer version is the only way to get the text.

Yes, indeed. It was just to demonstrate how to capture the option text in the same way that could be used to obtain the option value.

tpeck
11-20-2010, 01:21 AM
I have got this to partially work, but as you said glenngv there is an issue with calling the function after form submission, So I have tried this (and many other things):



function speakAudio(s){
var v = s.selectedIndex;
if (v == 0) return;
alert(v);
s.form.submit();
document.getElementById('say').src='text'+v+'.php';
alert("hi");
}
</script>


Instead of submitting the form onchange, it calls the function, alerts, and submits the form. Then it alerts again but seems to omit replacing the iframe contents.

Is there anything I can do to submit the form AND replace the iframe contents?

glenngv
11-20-2010, 01:27 AM
Where is the iframe located? In the same page as the form you are submitting? If so, when you submit the form, the whole page will be unloaded, so all the content including the iframe will be gone.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum