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';
}
}
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';
}
}
5 Answers
Reset to default 10You 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!
<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;
}
}
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.
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());
Set the handler on your select instead of option:
<select ... onclick="color(this.value)" >...