Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ How extract text from form element using <option>

Posted by: Ann-Marie Foster Aug 5 2018, 12:48 AM

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?

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

Posted by: pandy Aug 5 2018, 01:53 AM

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

Posted by: CharlesEF Aug 5 2018, 06:26 PM

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?

Posted by: 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.

Posted by: CharlesEF Aug 5 2018, 10:15 PM

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?

Posted by: pandy Aug 5 2018, 11:06 PM

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/Web/API/HTMLSelectElement/selectedIndex

Posted by: CharlesEF Aug 6 2018, 01:50 PM

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.

Posted by: pandy Aug 6 2018, 09:26 PM

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

Posted by: CharlesEF Aug 7 2018, 12:08 PM

I'll just keep using my syntax. No need to confuse myself more.

Posted by: pandy Aug 8 2018, 12:33 AM

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.

Posted by: CharlesEF Aug 8 2018, 01:39 AM

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.

Posted by: Christian J Aug 8 2018, 06:08 AM

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.

Posted by: pandy Aug 8 2018, 07:08 AM

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

Posted by: Christian J Aug 8 2018, 01: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.

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



Posted by: pandy Aug 8 2018, 01:41 PM

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?

Posted by: Christian J Aug 8 2018, 04:38 PM

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

Posted by: CharlesEF Aug 8 2018, 05:35 PM

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.

Posted by: pandy Aug 9 2018, 12:49 AM

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.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)