在选项标签的值上显示 div

Question

您好，我有以下代码：

<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

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

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

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

在选项标签的值上显示 div

display div on value from option tag

html

javascript

css

option