javascript - 根据选择菜单使用jQuery更改iFrame src

我正在尝试在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并更改某些部分（这让我有些困惑，但是，我碰到了墙，似乎无法解决）。

对于任何令人尴尬的错误表示歉意（新手）。

最佳答案

您可以尝试使用以下方法来简化它：

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