make a dropdown menu selection a js variable

Question

0.00/5 (No votes)

See more:

So I have a dropdown menu for a website and I want the selected option to be a variable in js so I can print/return it later on. Thanks in advance, I'm really new to javascript.

The JS I thought it is:

JavaScript

var P1 = document.getElementById("bammon1");
var Pokemon1 = P1.options[P1.3].text;

HTML

<label class="label">   Pokemon</label>
                <select id="bammon1">
                    <option>Please select a pokemon</option>
                        <option pokemon1=''>1) Simorgh</option>
                        <option pokemon1=''>2) --</option>
                        <option pokemon1=''>3) Flytrap</option>
                        <option pokemon1=''>4) Name Needed</option> 
                        <option pokemon1=''>5) Pandoze </option>
                        <option pokemon1=''>6) Apaflite </option>
                        <option pokemon1=''>7) Dendurus</option>
                        <option pokemon1=''>8) Bandirto</option>
                        <option pokemon1=''>9) --</option>
                        <option pokemon1=''>10) Tiflectum</option>
                        <option pokemon1=''>11) Sinder</option>
                        <option pokemon1=''>12) --</option>
                        <option pokemon1=''>13) Springfest</option>
                        <option pokemon1=''>14) Mirrage</option>
                        <option pokemon1=''>15) Skulprit</option>
                        <option pokemon1=''>16) --</option>
                        <option pokemon1=''>17) --</option>
                        <option pokemon1=''>18) Swelter</option>
                        <option pokemon1=''>19) Tundear </option>
                        <option pokemon1=''>20) Slimurk </option>
                        <option pokemon1=''>21) Sluborac</option>
                        <option pokemon1=''>22) Ogre </option>
                        <option pokemon1=''>23) Name Needed</option>
                        <option pokemon1=''>24) Name Needed</option>
                        <option pokemon1=''>25) Cychill </option>
                        <option pokemon1=''>26) Cydnidie</option>
                        <option pokemon1=''>27) Name Needed</option>
                        <option pokemon1=''>28) Name Needed</option>
                        <option pokemon1=''>29) Name Needed </option>
                        <option pokemon1=''>30) Farenheat </option>
                        <option pokemon1=''>31) Celsice</option>
                        <option pokemon1=''>32) --</option>
                        <option pokemon1=''>33) Spychic </option>
                        <option pokemon1=''>34) Murdoom </option>
                        <option pokemon1=''>35) --</option>
                        <option pokemon1=''>36) Name Needed </option>
                        <option pokemon1=''>37) Name Needed</option>
                        <option pokemon1=''>38) Name Needed </option>
                        <option pokemon1=''>39) Name Needed </option>
                        <option pokemon1=''>40) Name Needed </option>
                        <option pokemon1=''>41) Name Needed </option>
                        <option pokemon1=''>42) --</option>
                        <option pokemon1=''>43) --</option>
                        <option pokemon1=''>44) --</option>
                        <option pokemon1=''>45) --</option>
                        <option pokemon1=''>46) --</option>
                        <option pokemon1=''>47) --</option>
                        <option pokemon1=''>48) --</option>
                        <option pokemon1=''>49) --</option>
                        <option pokemon1=''>50) --</option>
                        <option pokemon1=''>51) Charidbyss </option>
                        <option pokemon1=''>52) --</option>
                        <option pokemon1=''>53) --</option>
                        <option pokemon1=''>54) --</option>
                        <option pokemon1=''>55) Faeum </option>
                        <option pokemon1=''>56) Wyvearn</option>
                        <option pokemon1=''>57) --</option>
                        <option pokemon1=''>58) --</option>
                        <option pokemon1=''>59) --</option>
                        <option pokemon1=''>60) --</option>

Posted 8-Feb-15 5:06am

Member 11436592

Updated 8-Feb-15 5:15am

Thomas Daniels

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Thomas Daniels · Answer 1 · 2015-02-08T05:21:00

Solution 1

To get the selected item, use the selectionIndex property:

JavaScript

var P1 = document.getElementById("bammon1");
var Pokemon1 = P1.options[P1.selectedIndex].text;

Also, I don't know why you have empty pokemon1 attributes in your option tags, but I don't think they should be there -- it's invalid HTML. If you actually want to put (and use) values in them, make the attribute name start with data- (for example, data-pokemon1). This kind of attribute is called a data attribute: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes[^]

Posted 8-Feb-15 5:21am

Thomas Daniels

Comments

Member 11436592 8-Feb-15 11:39am

So if I want it to it me the 4th character onward it should be:
var P1 = document.getElementById("bammon1");
var Pokemon1 = P1.options[P1.3].text;
and should the options be this then? <option pokemon1='data-pokemon1'>30) Farenheat </option>

Thomas Daniels 8-Feb-15 11:42am

No. Instead of P1.3, just use 3. And at your attributes, it's the attribute name that should start with data-, not the attribute value. And as it looks like you do not use these attributes, you can just remove them.

Member 11436592 8-Feb-15 11:55am

okay thanks, this is my first time making a website so you've been a big help

Thomas Daniels 8-Feb-15 11:56am

You're welcome!

Member 11436592 8-Feb-15 21:59pm

sorry another quick question, ehre do I put 'data-'? I removes " pokemon1=''" and it doesn't work, can you tell me again how I can have, for example if '1.) Simorgh' is selected how do I get Pokemon1 = Simorgh

Because right now it only keeps the first option as the variable, do I need to reassign it after a selection is made I wonder?

Thomas Daniels 9-Feb-15 11:46am

You can write your option like this: <option data-pokemon1="Simorgh">1.) Simorgh</option> and then you can use getAttribute to get the value of the data-pokemon1 attribute: https://developer.mozilla.org/en-US/docs/Web/API/Element.getAttribute[^]