在选项标签的值上显示 div答案

【问题标题】：display div on value from option tag在选项标签的值上显示 div
【发布时间】：2017-03-22 10:36:41
【问题描述】：

您好，我有以下代码：

<body>

<div id="left">
<p class="Title"> <h2>MARIO PUZO'S</h2> 
<h1 id="godfather">THE GODFATHER</h1> 
<h1 id="shawshank" style="display: none;">Shawshank Redemption</h1> 

<h4>by Mario Puzo and Francis Ford Coppola</h4> 

TRANSCRIPT</p>
<div class="Txt2">


<select id="1">
<option value="1">desk</option>
<option value="2">dark, empty room(shawshank redemption)</option>
<option value ="3">SOCIAL ROOM(fight club)</option></select>
</div></body>

现在我想添加显示任一
的代码 h1 id="godfather" 值 1，
h1 id="shawshank" 值 2
或者可能是价值 3 的三分之一

我怎样才能做到这一点？提前致谢

【问题讨论】：

你试过什么，给我们看代码，很简单
我没看懂问题，抱歉

标签： javascript html css option

【解决方案1】：

你想要这个吗？希望对你有帮助

<body>
<div id="left">
<p class="Title"> <h2>MARIO PUZO'S</h2> 
<h1 id="godfather" style="display:none">THE GODFATHER</h1> 
<h1 id="shawshank" style="display: none;">Shawshank Redemption</h1> 
<h1 id="third" style="display: none;">third text</h1> 

<h4>by Mario Puzo and Francis Ford Coppola</h4> 

TRANSCRIPT</p>
<div class="Txt2">
<select id="mySelect" onchange="myFunction()">
<option value="1">desk</option>
<option value="2">dark, empty room(shawshank redemption)</option>
<option value ="3">SOCIAL ROOM(fight club)</option></select>

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

<script>
function myFunction() {
    var x = document.getElementById("mySelect").value;
    if(document.getElementById("mySelect").value==1){
     document.getElementById("demo").innerHTML = document.getElementById("godfather").innerHTML;
    }else if(document.getElementById("mySelect").value==2){
    document.getElementById("demo").innerHTML = document.getElementById("shawshank").innerHTML;
    }else{
     document.getElementById("demo").innerHTML = document.getElementById("third").innerHTML;
    }
   
}
</script>

</body>

【讨论】：

【解决方案2】：

这里是代码。据我了解，您需要这个

    <html>
<head>
<style>

</style>

</head>
<body>

<div id="left">
<p class="Title"> <h2>MARIO PUZO'S</h2> </p>
<h1 id="godfather"></h1> 

<div class="Txt2">


<select id="1" onclick="test()">
<option value="1" >desk</option>
<option value="2">dark, empty room(shawshank redemption)</option>
<option value ="3">SOCIAL ROOM(fight club)</option></select>
</div>

</body>
<script>
function test() {
            var val= document.getElementById('1').value;

    if (val == '1') {
        document.getElementById('godfather').innerHTML = 'God Father';

    }
    if (val == '2') {
        document.getElementById('godfather').innerHTML = 'shawshank';

    }
    if (val == '3') {
    document.getElementById('godfather').innerHTML = 'Anything Else';
    }
    else{

    }
    }

</script>
</html>

【讨论】：