基于select菜单用iFrame jQuery更改src

Question

我试图在div中显示一个光球，而src是基于选择菜单中的一个值。

选择菜单将提供不同的房间，用户可以查看，div将持有一个iFrame，显示光球。

到目前为止，我的情况如下--它坏了(我将在下面解释)：

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

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

我不知道接下来该怎么做，我一直在研究人们如何使用jQuery并更改某些部分(我对此感到有些困惑，然而，我碰到了一道墙，似乎无法解决)。

为任何令人尴尬的错误(新手)道歉。

Answer 1

您可以尝试这样的方法来简化它：

<!-- 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版本)：https://jsfiddle.net/j94geqt5/3/