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

see this working fiddle.

下拉html显示div

3 个答案: