Pass selected value from <select> HTML markup to JAVASCRIPT

Question

How can i get the value of the <select> markup in my html and pass it on my javascript.

when i select red it should display my <div id="red"> im new to JS, so im not sure if i got the correct syntax.

HTML

<select>
<option name="choice1" value="red" onclick="color(this.value)">red</option>
<option name="choice2" value="blue" onclick="color(this.value)">blue</option>
</select>

<div id="red" style="display:none;">
<p>You want RED</p>
</div>

<div id="blue" style="display:none;">
<p>You want BLUE</p>
</div>

JAVASCRIPT

function color(color_type){
if (color_type == 'blue'){
document.getElementById('blue').style.display = 'block';
document.getElementById('red').style.display = 'none';
} 
else{
document.getElementById('blue').style.display = 'none';
document.getElementById('red').style.display = 'block';
}
}

BitHigher · Accepted Answer · 2013-08-05 10:36:40Z

10

You should use onchange event instead of onclick, besides, the event should set to select instead of option following is correct code

<script>
function color(color_type){
    if (color_type == 'blue'){
        document.getElementById('blue').style.display = 'block';
        document.getElementById('red').style.display = 'none';
    } 
    else{
        document.getElementById('blue').style.display = 'none';
        document.getElementById('red').style.display = 'block';
    }
}
</script>

<select onchange="color(this.value)">
    <option name="choice1" value="red" >red</option>
    <option name="choice2" value="blue" >blue</option>
</select>

<div id="red" style="display:none;">
    <p>You want RED</p>
</div>

<div id="blue" style="display:none;">
    <p>You want BLUE</p>
</div>

Hope Helps!

answered Aug 5, 2013 at 10:36

BitHigher

5013 silver badges12 bronze badges

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

2 Comments

user1735120 Over a year ago

thanks. also, in addition. whats the best approach if i have multiple DIVS to hide document.getElementById('blue').style.display = 'block'; document.getElementById('red').style.display = 'block'; document.getElementById('yellow').style.display = 'block'; document.getElementById('pink').style.display = 'block';

BitHigher Over a year ago

@user1735120 I would suggest you to use jQuery, it's a very famous and widely used js library. To get multiple divs, you can assign the same class to all these divs, such as <div id="red" class="colors"></div> <div id="blue" class="colors"></div>. In jQuery, if you want to hide all these divs, it's really very easy: $('.colors').hide(); and if you want to show them: $('.colors').show()

score 1 · Accepted Answer · 2013-08-05 10:50:03Z

1

<select onchange="color(event)">
<option name="choice1" value="red" >red</option>
<option name="choice2" value="blue" >blue</option>
</select>


function color(e){

  var color=e.target.options[e.target.selectedIndex].value;
  var blueDiv=document.getElementById('blue');
  var redDiv=document.getElementById('red');

  switch(color){
  case 'blue':
    blueDiv.style.display = 'block';
    redDiv.style.display = 'none';
    break;

  case 'red':
    redDiv.style.display = 'block';
    blueDiv.style.display = 'none';
    break;

  default:
    redDiv.style.display = 'none';
    blueDiv.style.display = 'none';
    break;
 }

}

edited Aug 5, 2013 at 10:50

answered Aug 5, 2013 at 10:44

user2587132

Comments

sjv · Accepted Answer · 2013-08-16 22:21:54Z

0

You can get the selected value by using "value" method on "select" element object. For below html you can get the value of select tag by document.getElementById("color").value

<body>
  <select id="color">
    <option value="red">red</option>
    <option value="blue">blue</option>
  </select>

  <div id="red" style="display:none;">
    <p>You want RED</p>
  </div>

  <div id="blue" style="display:none;">
    <p>You want BLUE</p>
  </div>
</body>

Heres how I have written my js :

<script>
  window.addEventListener("load", function() {
    document.getElementById("color").addEventListener("change", function() {
      var selectElem = document.getElementById("color");
      document.getElementById("red").style.display = "none";
      document.getElementById("blue").style.display = "none";
      document.getElementById(selectElem.value).style.display = "block";
    })
  })
</script>

Tip : Always try to implement DRY(Dont repeat your code) code.

The above code will not work in IE8 or below. IE8 and below browsers supports attachEvent() method. We can create our own custom event handler method that will work for cross browsers.

function addHandler(element, type, handler) {
  alert("Hi");
  if(element.addEventListener) {
    element.addEventListener(type, handler, false);
  } else if(element.attachEvent) {
    element.attachEvent("on"+type, handler)
  } else { 
    element["on"+type] = handler };
}
addHandler(window, "load", main)

function main() {
  function handler() {
    var selectElem = document.getElementById("color");
    document.getElementById("red").style.display = "none";
    document.getElementById("blue").style.display = "none";
    document.getElementById(selectElem.value).style.display = "block";
  }
  addHandler(document.getElementById("color"), "change", handler);
}

I have created a custom addHandler() function that will work for all IE's, chrome, firefox, opera and safari.

edited Aug 16, 2013 at 22:21

answered Aug 5, 2013 at 12:36

sjv

2052 silver badges6 bronze badges

2 Comments

user1735120 Over a year ago

i like this code. but i heard .addEventListerner doest like IE? is this true?

sjv Over a year ago

addEventListener is supported in IE9(or above), chrome, safari, firefox, opera. But for IE8 and below you can use attachEvent() which accepts two args same as first two args of addEventListener.

Thinker Bell · Accepted Answer · 2023-02-21 08:43:35Z

0

You may want to try this

<select id="color" placeholder="{{__('Choose color')}}">
<option name="choice1" value="red" >red</option>
<option name="choice2" value="blue" >blue</option>
</select>

<div id="red" style="display:none;">
<p>You want RED</p>
</div>
<div id="blue" style="display:none;">
<p>You want BLUE</p>
</div>

This is the script

$('#color').change(

    function (){
        if($('#color').val()==='red'){
            $("#red").show();
            $("#blue").hide();
        }
        else{
           $("#blue").show();
           $("#red").hide();
        }

        }
);

You can check the selected value using alert ($('#color').val());

answered Feb 21, 2023 at 8:43

Thinker Bell

971 silver badge4 bronze badges

Comments

Abhitalks · Accepted Answer · 2013-08-05 10:36:03Z

-1

Set the handler on your select instead of option:

<select ... onclick="color(this.value)" >...

answered Aug 5, 2013 at 10:36

Abhitalks

28.5k6 gold badges61 silver badges82 bronze badges

Collectives™ on Stack Overflow

Pass selected value from <select> HTML markup to JAVASCRIPT

5 Answers 5

2 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related