下拉的html顯示div

我想創建一個JavaScript下拉爲我的網站，我希望它顯示下面的div。下拉的html顯示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代碼才能工作？任何幫助將不勝感激！我看了很多其他人，但似乎無法得到任何工作。

來源

2013-05-20 Layla Genta

<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

來源

2013-05-20 08:16:16

我把這個成jsfiddle，我不能得到它的工作> [鏈接]（http://jsfiddle.net/Xe4tt/） –

運行見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'); 
    }); 
});

來源

2013-05-20 08:19:11 visnu

我試過使用這個，但我似乎無法讓它工作> [jsfiddle]（http ：//jsfiddle.net/wumsf/）和'$'是什麼意思？有沒有辦法編寫它沒有這些？ –

請參閱更新的答案。 – visnu

查看http://api.jquery.com/現在人們使用jQuery。依靠javascript是先行者。 – visnu

首先，您使用的是<option>id屬性我會用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'; 
    } 
}

如果你已經有一個多個圖像顯示了在隨後的下拉的變化，問題隱藏所有的div每次onchange()觸發時

see this working fiddle.

來源

2013-05-20 11:23:04 Vishal

下拉的html顯示div

回答

相關問題