Help - Search - Members - Calendar
Full Version: How extract text from form element using <option>
HTMLHelp Forums > Programming > Client-side Scripting
Ann-Marie Foster
Here is the COUNTRY input of a checkout form.

CODE
  HTML:-

Country <select  NAME="Bill Country" ID="BillCountry" ONCHANGE="UpdateCheckout()">
<option value="US">USA</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AD">Andorra</option>
. . . . . .
</select>        


The above displays a form element where the customer can select their country.
java script: document.getElementById("BillCountry").value;
Gets the 2 character "Country Code" needed by PayPal.
But I would like to also access the TEXT of the particular country selected for printing a summary.
After they select a country the full text shows on the form element but HOW DO I EXTRACT THE TEXT?
pandy
You need to use the 'text' property instead of 'value'. But it's a little more complicated. You also need the index of the selected option. I think this should do it.

CODE
document.getElementById('BillCountry')[document.getElementById('BillCountry').selectedIndex].text


I don't know why value works without getting the index of the selected option but text doesn't. Now you've made me brood over that again. ninja.gif happy.gif
pandy
Now I remember what I concluded last time I brooded. It's of course because the value of the selected OPTION becomes the value of the SELECT whereas the text content of each OPTION belongs to that option alone and isn't transferred to the SELECT upon selection. Duh. biggrin.gif
CharlesEF
QUOTE(pandy @ Aug 5 2018, 01:45 AM) *

You need to use the 'text' property instead of 'value'. But it's a little more complicated. You also need the index of the selected option. I think this should do it.

CODE
document.getElementById('BillCountry')[document.getElementById('BillCountry').selectedIndex].text


I don't know why value works without getting the index of the selected option but text doesn't. Now you've made me brood over that again. ninja.gif happy.gif

Shouldn't that be:
CODE
document.getElementById('BillCountry').options[document.getElementById('BillCountry').selectedIndex].text
Or, is '.options' really needed?
pandy
You mean we could just do 'document.getElementById("BillCountry").text;'? No, that won't work. Because the text we want doesn't belong to the the select (Bill County). We need to get down to the selected option.
CharlesEF
QUOTE(pandy @ Aug 5 2018, 10:04 PM) *

You mean we could just do 'document.getElementById("BillCountry").text;'? No, that won't work. Because the text we want doesn't belong to the the select (Bill County). We need to get down to the selected option.

Um, that's not what I was asking. Your javascript is missing the '.options' part. My javascript has the '.options' part. I quess my question is will your code work without the '.options' part?
pandy
Oh, sorry, I misread, thought you quoted my code. Yeah, it works. So does yours. I didn't expect it to. I thought selectedIndex was a property of the select object. wacko.gif

https://developer.mozilla.org/en-US/docs/We...t/selectedIndex
CharlesEF
I didn't expect your code to work. And it has nothing to do with selectedIndex. Your code treats 'document.getElementById("BillCountry")' as an array not an object. That's what I didn't understand.
pandy
But the options are a collection and a collection is sort of an array. I've never really understood the difference. If there is any.

I don't think 'document.getElementById("BillCountry")' itself is treated as an array. Rather .selectedIndex referrs to the array/collection it contains, or how it should be expressed.

Sorry, not very good at terminology here. blush.gif
CharlesEF
I'll just keep using my syntax. No need to confuse myself more.
pandy
Same for me. That's the way I learnt it. The less to remember the better. biggrin.gif

What surprises me is that I can't find an example of your method - still it obviously works. If I google selectedIndex I only find examples of it used directly with select.
CharlesEF
This code is taken from a stackoverflow post.
CODE
function getSelectedText(elementId) {
    var elt = document.getElementById(elementId);

    if (elt.selectedIndex == -1)
        return null;

    return elt.options[elt.selectedIndex].text;
}

'options' is a collection of all the options in a select. I've always used it in my javascipt. And I have seen the same code used in many other posts/articles.
Christian J
QUOTE(pandy @ Aug 8 2018, 07:33 AM) *

What surprises me is that I can't find an example of your method - still it obviously works.

This one: http://www.javascriptkit.com/jsref/select.shtml ?
CODE
document.getElementById("myselect").options[0] //accesses first option via options[]

Also, wasn't options[] always used back in time when FORM and SELECT elements were accessed by their NAME values (before getElementById got into use)?

Anyway I suspect both of your methods are correct, but I haven't checked the ECMA spec.
pandy
Of course options can be used. tongue.gif

It was options[] paired with selectedIndex as in CharlesEF's working example I couldn't find an example of. I thought selectedIndex was a property of SELECT. Seems odd that it would also be a property of a specific OPTION since an option doesn't contain any indexed array or collection. wacko.gif
Christian J
QUOTE(pandy @ Aug 8 2018, 02:08 PM) *

It was options[] paired with selectedIndex as in CharlesEF's working example I couldn't find an example of.

It's just a special case, no exact example is needed.

QUOTE
I thought selectedIndex was a property of SELECT.

True.

QUOTE
Seems odd that it would also be a property of a specific OPTION

It isn't, it's used as the index in the options[] property (instead of an integer like in the javascriptkit example).


pandy
QUOTE(Christian J @ Aug 8 2018, 08:18 PM) *

QUOTE(pandy @ Aug 8 2018, 02:08 PM) *

It was options[] paired with selectedIndex as in CharlesEF's working example I couldn't find an example of.

It's just a special case, no exact example is needed.


Huh? wacko.gif

QUOTE

QUOTE
Seems odd that it would also be a property of a specific OPTION

It isn't, it's used as the index in the options[] property (instead of an integer like in the javascriptkit example).


Yeah, you are right. I see it now. But that doesn't that make the construct seem unnecessary verbose since selectedIndex can be used directly with the select?
Christian J
QUOTE(pandy @ Aug 8 2018, 08:41 PM) *

doesn't that make the construct seem unnecessary verbose since selectedIndex can be used directly with the select?

You mean CharlesEF's construct? Yes, maybe that's why it's hard to find an example. tongue.gif
CharlesEF
Funny, when I do a bing search (I don't use google for anything) for 'javascript get selected option text' all the main results shows examples like my code sample. In fact, pandy's code sample is the only place I have ever seen that syntax used.
pandy
You would have seen it twice had you follow my link to the MDN reference. biggrin.gif

I have found examples of your way of doing it now, but only at forums and such.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.