選択メニューに基づいてiFrame srcをjQueryに変更

Question

divに写真球を表示しようとしていますが、srcは選択メニューの値に基づいています。

選択メニューには、ユーザーが表示できるさまざまな部屋が用意されています。また、divには、写真を表示するiFrameがあります。ここで

は、私がこれまで持っているものだ - それが壊れています（私は以下説明します）：私はから上に行くためにどこか分からない

<!-- 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/