CODEWITHSUNDEEP
javascripthtmldropdown
D.Ge.
D.Ge.

Reputation: 127

Show default value with HTML dropdown

I created a dropdown. Like this, the dropdown shows 1 as default value in the dropdown, but I also want to show the value assigned to that showing before I selected anything in the first place. This means, before I've clicked anything, I want it to show "You selected: one" by default. How do I do this best?

function myFunction() {
  var x = document.getElementById("mySelect").value;
  if (x == "one") {
    document.getElementById("demo").innerHTML = "You selected: " + x;
  } else if (x == "two") {
    document.getElementById("demo").innerHTML = "You selected: " + x;
  } else if (x == "three") {
    document.getElementById("demo").innerHTML = "You selected: " + x;
  }
}
<select name="test" id="mySelect" onchange="myFunction()">
  <option value="one">1</option>
  <option value="two">2</option>
  <option value="three">3</option>
</select>
<p id="demo"></p>

thank you!

Upvotes: 0

Views: 436

Answers (3)

KooiInc
KooiInc

Reputation: 122986

It's not a good idea to add event handlers as attributes of html elements (aka inline event handlers). Why not?

Instead, in a separate script, add the selected value at start and add a change handler to document that displays the value of the selected option after a selection is made.

{
  // at start: fill p#demo
  document.querySelector(`#demo>span`).textContent = 
    document.querySelector(`#mySelect`).value;
  // change handler  
  document.addEventListener(`change`, evt => evt.target.id === `mySelect` &&
    (document.querySelector(`#demo>span`).textContent = evt.target.value));
}
<select name="test" id="mySelect">
  <option value="one">1</option>
  <option value="two">2</option>
  <option value="three">3</option>
</select>

<p id="demo">Current selection: <span></span></p>

Upvotes: 1

Alok Mali
Alok Mali

Reputation: 2881

You can call your function on the page load.

Like below, (function(){})(); is a self calling function which triggers on load of the page.

function myFunction() {
    var x = document.getElementById("mySelect").value;

   if(x == "one"){
       document.getElementById("demo").innerHTML = "You selected: " + x;}
    else if(x == "two"){
       document.getElementById("demo").innerHTML = "You selected: " + x;}
    else if(x == "three"){
       document.getElementById("demo").innerHTML = "You selected: " + x;
    }
}

(function(){
 myFunction()
})();
<select name="test" id="mySelect" onchange="myFunction()">
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
</select>

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

Upvotes: 1

Abdelrahman Gobarah
Abdelrahman Gobarah

Reputation: 1589

just call myFunction() onload

function myFunction() {
  var x = document.getElementById("mySelect").value;

  if (x == "one") {
    document.getElementById("demo").innerHTML = "You selected: " + x;
  } else if (x == "two") {
    document.getElementById("demo").innerHTML = "You selected: " + x;
  } else if (x == "three") {
    document.getElementById("demo").innerHTML = "You selected: " + x;
  }
}

myFunction(); // call onload
<select name="test" id="mySelect" onchange="myFunction()">
  <option value="one">1</option>
  <option value="two">2</option>
  <option value="three">3</option>
</select>

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

Updated remove if statement

function myFunction() {
  var x = document.getElementById("mySelect").value;

  document.getElementById("demo").innerHTML = "You selected: " + x;
}

myFunction(); // call onload
<select name="test" id="mySelect" onchange="myFunction()">
  <option value="one">1</option>
  <option value="two">2</option>
  <option value="three">3</option>
</select>

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

Upvotes: 2

Related Questions