меню выбора для iframe src с помощью javascript

Question

Я узнал, как использовать javascript для изменения iframe src, но когда я сделал меню выбора, которое позволяет вам выбрать URL для загрузки, он загружает только первый параметр в меню , даже если вы выберете другой URL-адрес. Я получил его, чтобы работать один раз, но я сделал несколько изменений, и это не позволило мне вернуться назад с отменой. Вот что я получил:

<iframe src="http://jquery.com/" id="myFrame" width="500" height="500" scrolling="no" frameborder="0"></iframe> 
 
<div> 
 
    <select id="selected2"> 
 
    <option value="http://linux.com">1</option> 
 
    <option value="http://microsoft.com">2</option> 
 
    <option value="http://apple.com">3</option> 
 
    </select> 
 
    <button onclick="loadPages()">Click Me</button> 
 
    <script> 
 
    function loadPages() { 
 
     var loc = dataCap; 
 
     document.getElementById('myFrame').setAttribute('src', loc); 
 
    } 
 
    var dataCap = document.getElementById("selected2").value; 
 
    </script>

Answer 1

Дело в том, что вы только получение значения в первый раз, когда ваш скрипт выполняет. Чтобы получить текущее выбранное значение, вам нужно получить правильное значение, когда вы нажимаете кнопку, внутри функции onclick.

http://jsfiddle.net/v74ypgwk/1/

<iframe src="http://jquery.com/" id="myFrame" width="500" height="500" scrolling="no" frameborder="0"></iframe> 
<div> 
<select id="selected2"> 
    <option value="http://linux.com">1</option> 
    <option value="http://microsoft.com">2</option> 
    <option value="http://apple.com">3</option> 
</select> 
<button onclick="loadPages()">Click Me</button> 
<script> 
var urlSelect = document.getElementById('selected2'), 
    myFrame = document.getElementById('myFrame'); 
function loadPages() { 
    var loc = urlSelect.value; 
    // You can also do -> myFrame.src = loc; 
    myFrame.setAttribute('src', loc); 
} 
</script>