下拉列表中选定值的不同显示

时间:2018-05-14 10:18:43

标签: javascript html drop-down-menu dropdown

我想知道根据下拉菜单中选定的值更改文字的代码是什么。

Example Image

我知道使用数字值创建下拉列表的代码:

<select><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select>&#39;

但我不知道如何选择不同的值来显示会相应改变的内容。你能给我一些支持吗?我正在使用

https://www.wix.com/

1 个答案:

答案 0 :(得分:1)

这可能会帮助你

&#13;
&#13;
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>


<select><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select>'

<p id="ele1">foo</p>

<script>
var select = document.getElementsByTagName('select')[0];
var ele1 = document.getElementById('ele1');
select.addEventListener('change',function(e){ 

//alert(this.value);
if(this.value=='2'){
ele1.innerHTML="bar"
}else if(this.value=='3'){
ele1.innerHTML="foo bar"
}else if(this.value=='4'){
ele1.innerHTML="foo bar foo bar"
}

})

</script>


</body>
</html>
&#13;
&#13;
&#13;