我在這裏玩了幾個例子,但似乎無法加載新的iframe而沒有「重置」下拉菜單(選擇「pick度假村「選項沒有價值)。有一種方法可以在選擇新選項後動態更改iframe?通過下拉菜單更改iframe src不會加載新的iframe
這裏有一個小提琴:http://jsfiddle.net/scdgw48g/
<h2>Your Powder Forecast</h2>
<p>Pick a location to see who's getting hit!</p>
<select id="selectResort">
<option>Pick Resort</option>
<option value="http://forecast.io/embed/#lat=42.3583&lon=-71.0603&name=Downtown Boston&font=inherit">Boston</option>
<option value="http://forecast.io/embed/#lat=39.6061&lon=-106.3571&name=Vail&font=inherit">Vail</option>
</select>
<button onClick="loadPages()">See Forecast</button>
<iframe id="myFrame" type="text/html" frameborder="0" height="245" width="100%" src=""> </iframe>
<script>
var urlSelect = document.getElementById('selectResort'),
myFrame = document.getElementById('myFrame');
function loadPages() {
var loc = urlSelect.value;
// You can also do -> myFrame.src = loc;
myFrame.setAttribute('src', loc);
}
</script>
如果您檢查您的控制檯爲小提琴跟它的作用是不確定的。 – Taplar
在小提琴中工作:http://jsfiddle.net/ykdug757/如果您在左側工具欄上添加jQuery時選擇了「無包身」選項。也應該在你的網頁上工作。 –