Using Javascript to select a value from a Html Select box

Question

Hey guys I am using JavaScript to select a specific value(option) from the html select form tag, but whenever I call my JavaScript function I get a single message repeating for all the choices I want to select. Ex: If I choose to select 'Rabbit' from the list of options and then display a message saying 'Rabbit chosen'; the message will display for each option/value selected.

Here is my JavaScript Code:

    var element = document.getElementById('choices').value;

    function SelectElement() {    
      if (element = 'Rabbit') {
          alert("Rabbit Selected");
      }
      else if (element = 'Wall') {
          alert("Wall Selected");
      }
      else if (element = 'Arrow') {
          alert("Arrow Selected");
      }      
   }

Here is my html code:

 <form>
     <select id="choices" >
        <option>Rabbit</option>
        <option>Wall</option>
        <option>Arrow</option>
     </select>

     <input type="button" value="Submit" onclick="SelectElement()"/>
 </form>

Can you smart guys please help me????

You have made mistake in your if statement, Do it double equal and it will fix your issue. — Harsh Sanghani
– Harsh Sanghani, Commented Jan 1, 2016 at 12:31
I used the comparison operator, but nothing happens when I click submit. — Nathan Siafa
– Nathan Siafa, Commented Jan 1, 2016 at 22:01

void · Accepted Answer · 2016-01-01 12:32:37Z

4

A. You should fetch the value each time before calling the function and then check it otherwise your element variable won't refresh at all.

B. To compare two values you should use ==, = is an assignment operator.

   function SelectElement() { 
      var element = document.getElementById('choices').value;   
      if (element == 'Rabbit') {
          alert("Rabbit Selected");
      }  
   }

(As your question is not much clear) if you just want to alert the selected value for every option clicked, just do:

  function SelectElement() { 
      var element = document.getElementById('choices').value;   
      alert(element+" Selected");
   }

This is basic string concatenation.

edited Jan 1, 2016 at 12:32

answered Jan 1, 2016 at 12:28

void

36.7k10 gold badges71 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

heisenberg Over a year ago

Sorry, I missed everything after A. I removed it.

void Over a year ago

@heisenberg it okay :)

Nathan Siafa Over a year ago

nice one @void but how do I fetch the value each time before calling the function so that my variable element refreshes?

Nathan Siafa Over a year ago

I used the comparison operator, but nothing happens when I click submit.

Theodor Bischler · Accepted Answer · 2016-01-01 13:16:35Z

0

There is a something called selected == true or false in a "select" tag.
You could write in HTML :

<form>
  <select id="choices">
    <option id="Rabbit">Rabbit</option>
    <option id="Wall">Wall</option>
    <option id="Arrow">Arrow</option>
  </select>
</form>
<button onclick="TakeElement()">Click</button>

You could write in javascript:

   var ra = document.getElementById('Rabbit');
    var wa = document.getElementById('Wall');  
var ar = document.getElementById('Arrow');

   function TakeElement() {
      if (ra.selected == true) {
        alert("Rabbit is selected");
      }
      if (wa.selected == true) {
        alert("Wall is selected");
      }
      if (ar.selected == true) {
        alert("Arrow is selected");
      }
   }

answered Jan 1, 2016 at 13:16

Theodor Bischler

10312 bronze badges

2 Comments

cimmanon Over a year ago

Your answer adds nothing over the existing answer, which was posted about 45 minutes before yours.

Theodor Bischler Over a year ago

Yes it does, nobody use the .selected == true or false in all thiese answers

Damian Kozlak · Accepted Answer · 2016-01-01 13:04:50Z

-2

I think you must replace element ='rabbit' with element =='rabbit'

== is comparison operator and = is assignment operator

edited Jan 1, 2016 at 13:04

Damian Kozlak

7,09310 gold badges47 silver badges51 bronze badges

answered Jan 1, 2016 at 12:32

KingC

687 bronze badges

4 Comments

SuperDJ Over a year ago

You haven't added a single thing to your answer of what wasn't in any of the others. You are fishing for reputation

KingC Over a year ago

Why down-votes? Isn't my answer correct? Seriously I think this website is not as good as I thought. Btw, the answer for simple questions must be concise, not like a big essay questions like you people who fish for reputations do. Go and learn some skills before pointing others. +SuperDJ

cimmanon Over a year ago

Not my downvote, but if the problem is entirely caused by a typo, the question should be closed (since typos almost never help future users). Note that the incorrect operator is not the only problem with the code here.

KingC Over a year ago

Clearly it's not a typo, he is just confused between assignment and comparison operator it seems and hence I gave him the simplest of the answers without unnecessary stuff as I wasn't fishing for reputation. Kindly check before downvoting.

Collectives™ on Stack Overflow

Using Javascript to select a value from a Html Select box

3 Answers 3

4 Comments

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related