html - 显示 div 的下拉 html

Question

我想为我的网站创建一个JavaScript 下拉菜单，并希望它在下面显示 div。

<select name="Portfolio">    
<option id="1">Option 1</option>
<option id="2">Option 2</option>
<option id="3">Option 3</option>
<option id="4">Option 4</option>
</select>

<div id="1"><img src="URL" alt="Blah Blah Blah"/></div>
<div id="2"><img src="URL" alt="Blah Blah Blah"/></div>

我需要什么 JavaScript 代码才能让它工作？任何帮助将不胜感激！我看过很多其他人，但似乎无法得到任何工作。

Answer 1

<select name="Portfolio" id="portfolio">
<option>None</option>      
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option alue="4">Option 4</option>
</select>

<div id="1" style="display:none;"><img src="URL" alt="Blah Blah Blah"/></div>
<div id="2" style="display:none;"><img src="URL" alt="Blah Blah Blah"/></div>


$(document).ready(function() {
    $("select").change(function() {
        $('div').hide();
        $('#'+$(this).val()).show();
    });
});

在 jsfiddle 中运行它

Answer 2

请参阅jsfiddle链接演示

<select name="Portfolio">
<option>None</option>      
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>

<div id="1" style="display:none;"><img src="img1" alt="Blah Blah Blah"/></div>

<div id="2" style="display:none;"><img src="img2" alt="Blah Blah Blah"/></div>

var old_id
$(function(){
  $("select").change(function(){
       $('div').css('display','none');
       $('#'+$(this).val()).css('display','block');
  });
});

Answer 3

首先，您使用的是我建议使用的id属性；所以你的标记会有点像这样：<option>value

<select name="Portfolio">    
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>

那么，如果您不使用jQuery ，那么一个简单的 javascript 方法可以解决您的问题，就像：

window.onload = function() {
    document.getElementsByTagName('select')[0].onchange = function() {
        document.getElementById(this.value).style.display = 'block';
    }
}

如果您在随后的下拉更改中显示多个图像时遇到问题，请在每次onchange()触发时隐藏所有 div

看到这个工作小提琴。