How can I set a default variable value before select action in JavaScript

Question

I am completely new to JavaScript, so far i have been able to learn how to get values from my select drop down. However one other thing I would like to do is have a default value which gets displayed when a user visits the page. Then change with the select action. Currently I get no value displayed until after selecting from the drop down. I have tried to search but i have not found any easy to understand guide on how to implement this. See my code below

function val() {
   d = document.getElementById("select_year").value;
   document.getElementById("demo").innerHTML = d;
 }

<select onchange="val()"  id="select_year">
    <option selected value="2017">2017</option>
    <option value="2016">2016</option>
    <option value="2015">2015</option>
</select>

<p id="demo"></p>

Works fine for me in Chrome, the default value is exactly what you set it to be ? — adeneo
– adeneo, Commented Feb 22, 2017 at 17:22
Been trying it in chrome myself. not sure why it didn't work. Seems i was not calling the function with val (); at the end. — iamMash
– iamMash, Commented Feb 22, 2017 at 19:14

kind user · Accepted Answer · 2017-02-22 17:21:38Z

3

Seems like you have just to call your function.

function val() {
  d = document.getElementById("select_year").value;
  document.getElementById("demo").innerHTML = d;
}

val();

<select onchange="val()" id="select_year">
        <option selected value="2017">2017</option>
        <option value="2016">2016</option>
        <option value="2015">2015</option>
  </select>

<p id="demo"></p>

edited Feb 22, 2017 at 17:21

answered Feb 22, 2017 at 17:20

kind user

42k8 gold badges69 silver badges78 bronze badges

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

3 Comments

Daniel Batalla Over a year ago

Also you can invoke val function appending () after closing brace

kind user Over a year ago

@DanielBatalla True, but then you will scope this function (anonymous function) and actually I don't know if OP wants it.

iamMash Over a year ago

@Kinduser works perfectly, thanks. Is it possible to create a global variable to use in a function that follows. As my intention is not use the value selected in another function, but had to over come that issue first.

Tyler Roper · Accepted Answer · 2017-02-22 17:19:52Z

-1

Just make a small change.

<option selected="selected" value="122"></option>

this will be good.

edited Feb 22, 2017 at 17:19

Tyler Roper

21.7k6 gold badges35 silver badges58 bronze badges

answered Feb 22, 2017 at 17:19

Swesh

1501 silver badge18 bronze badges

3 Comments

Tyler Roper Over a year ago

<option selected> and <option selected="selected"> are the exact same thing. The selected attribute doesn't take a value; the option is selected based on the presence of this attribute. You could do selected="false" to select an option and it would work.

Tyler Roper Over a year ago

Yes, that's exactly what I said, it will always work. You can do selected="asiudhgsadkasd" and it will work. Giving the selected attribute a value at all is entirely unnecessary. Your answer does not provide a solution to the question that OP is asking because you've essentially just told OP to "add an extra word and everything should work", and i'm telling you that the extra word does nothing.

Sanchay Kumar Over a year ago

selected="selected" is required in XHTML

Collectives™ on Stack Overflow

How can I set a default variable value before select action in JavaScript

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related