时间戳

首页 > 解决方案 > 下拉列表中所选值的不同显示

javascript - 下拉列表中所选值的不同显示

问题描述

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

示例图像

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

<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>'

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

https://www.wix.com/

标签： javascripthtmldrop-down-menudropdown

解决方案

这可能会帮助你

<!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>

推荐阅读