선택 메뉴를 기반으로 iFrame src를 jQuery로 변경

Question

div에 포토 스피어를 표시하려고합니다. src는 선택 메뉴의 값을 기반으로합니다.

선택 메뉴는 사용자가 볼 수있는 여러 개의 방을 제공하며 div는 광구를 표시하는 iFrame을 보유합니다. 여기

내가 지금까지 무엇을 - 그것은이 생겼습니다 (I 아래에 설명 할 것이다) : 나는에서에 갈 곳 확실하지 않다

<!-- VIRTUAL TOUR --> 
     <select id="mySelect"> 
      <option value ="" disabled selected> Select a PhotoSphere </option> 

      <option value="1"> Computing Classroom </option> 
      <option value="2"> Common Room </option> 
      <option value="3"> Leacture Theatre </option> 
      <option value="4"> Atrium </option> 
      <option value="5"> Coffee Shop </option> 
     </select> 

     <div> 
      <iframe id="myPhotoSphere" src="http://orb.photo/embedded_player.php?view=201712011cb4f0e032532a59807bea088f9ca145" frameborder="0" scrolling="no" width="900" height="600">Please enable iframes to view content.</iframe> 
     </div> 

:

<!-- SCRIPT FOR PHOTOSPHERE--> 
    <script> 
     $(document).ready(function(){ 

      // SELECT MENU 
      $("#mySelect").change(function(){ 
       var value = $(this).val(); 

       //IFRAME TAG 
       $("#myPhotoSphere").attr 
       var src = ($(this).attr('src') === 'photosphere_example.png') 
       $(this).attr('src', src); 

       // Classroom: 
       if(value == "1") 
       { $("#myPhotoSphere").attr("src","http://orb.photo/embedded_player.php?view=201712011cb4f0e032532a59807bea088f9ca145"); } 

       //Common room: 
       if(value == "2") 
       { $("#myPhotoSphere").attr("src","http://orb.photo/embedded_player.php?view=20171201a1da59af307b44fa6dfa5ab2dfc157bd"); } 

       //Lecture theatre: 
       if(value == "3") 
       { $("#myPhotoSphere").attr("src","http://orb.photo/embedded_player.php?view=2017120169fafbe2c0a507bbb06284857b3ea427"); } 

       //Atrium: 
       if(value == "4") 
       { $("#myPhotoSphere").attr("src","http://orb.photo/embedded_player.php?view=20171201a5853f710927d4a6b13909117b9ac85a"); } 

       //Coffe Shop: 
       if(value == "5") 
       { $("#myPhotoSphere").attr("src"," http://orb.photo/embedded_player.php?view=20171201b19318b56e5168ce54ee5a2cc024c798"); } 
      }); 
     }); 
    </script> 

하는 것은 그 다음 여기에 HTML의 여기 사람들이 jQuery를 사용하고 특정 부분을 변경하는 방법을 살펴 보았습니다. (그러나 나는 함께 어렴풋이 나타났습니다. 그러나 벽을 치고 그것을 해결할 수없는 것 같습니다.) 어떤 부끄러운 실수 (초보자)에 대한

사과 ..

Answer 1

당신은 그것을 단순화하기 위해 이런 일을 시도 할 수 :

HTML

<!-- VIRTUAL TOUR --> 
<select id="mySelect"> 
    <option value="" disabled selected> Select a PhotoSphere </option> 
    <option value="http://www.google.com">Google</option> 
    <option value="http://www.yahoo.com">Yahoo!</option> 
    <option value="http://www.msn.com">MSN</option> 
</select> 

<div> 
    <iframe id="myPhotoSphere" src="http://www.google.com" frameborder="0" scrolling="no" width="900" height="600"></iframe> 
</div> 

을 JAVASCRIPT

$(document).ready(function() { 
    // SELECT MENU 
    $("#mySelect").change(function() { 
    var value = $(this).val(); 

    //IFRAME TAG 
    console.log(value); 
    $("#myPhotoSphere").attr('src', value); 
    }) 
}); 

여기에 동작하는 예제 (링크는 단지이 예제의 다른 jsfiddle 버전을로드)입니다 : 당신이 옵션/w를 연결하려는 URL에`option` 태그의 '값'을 설정하지 왜 https://jsfiddle.net/j94geqt5/3/