How extract text from form element using <option>, Javascript extracts the assigned value, how do I get the text? |
How extract text from form element using <option>, Javascript extracts the assigned value, how do I get the text? |
Ann-Marie Foster |
Aug 5 2018, 12:48 AM
Post
#1
|
Group: Members Posts: 7 Joined: 5-August 18 Member No.: 26,686 |
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 |
Aug 5 2018, 01:45 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
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. |
pandy |
Aug 5 2018, 01:53 AM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
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.
|
CharlesEF |
Aug 5 2018, 06:26 PM
Post
#4
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
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. Shouldn't that be: CODE document.getElementById('BillCountry').options[document.getElementById('BillCountry').selectedIndex].text Or, is '.options' really needed?This post has been edited by CharlesEF: Aug 5 2018, 06:29 PM |
pandy |
Aug 5 2018, 10:04 PM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
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 |
Aug 5 2018, 10:15 PM
Post
#6
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
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 |
Aug 5 2018, 11:06 PM
Post
#7
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
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.
https://developer.mozilla.org/en-US/docs/We...t/selectedIndex |
CharlesEF |
Aug 6 2018, 01:50 PM
Post
#8
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
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 |
Aug 6 2018, 09:26 PM
Post
#9
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
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. |
CharlesEF |
Aug 7 2018, 12:08 PM
Post
#10
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
I'll just keep using my syntax. No need to confuse myself more.
|
pandy |
Aug 8 2018, 12:33 AM
Post
#11
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
Same for me. That's the way I learnt it. The less to remember the better.
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 |
Aug 8 2018, 01:39 AM
Post
#12
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
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 |
Aug 8 2018, 06:08 AM
Post
#13
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
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 |
Aug 8 2018, 07:08 AM
Post
#14
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
Of course options can be used.
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. |
Christian J |
Aug 8 2018, 01:18 PM
Post
#15
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
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 |
Aug 8 2018, 01:41 PM
Post
#16
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
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? 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 |
Aug 8 2018, 04:38 PM
Post
#17
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
|
CharlesEF |
Aug 8 2018, 05:35 PM
Post
#18
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
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 |
Aug 9 2018, 12:49 AM
Post
#19
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
You would have seen it twice had you follow my link to the MDN reference.
I have found examples of your way of doing it now, but only at forums and such. |
Lo-Fi Version | Time is now: 30th March 2024 - 01:15 AM |