基于<；更改javascript中的图像；选择>；下拉列表

我试图制作一个简单的页面，根据

显示全景图像

我的代码：

pannellum.viewer（'panorama'{
“类型”：“等矩形”，
“全景”：https://pannellum.org/images/alma.jpg",
“自动加载”：正确，
“自动旋转”：-2，
“标题”：“1级”
});

选择位置：
一级
二级
三级
四级
您应该定义一个JavaScript函数，并使用event onclick附加select标记，以便无论何时更改其值，都将调用该JavaScript函数并传递更改后的值

<script type="text/javascript">
function selectionChanged(value)
{
   document.getElementById("panorama").innerHTML = '';
    pannellum.viewer('panorama', {
            "type": "equirectangular",
            "panorama": value,
            "autoLoad": true,
            "autoRotate": -2,
            "title": value
        });
}
</script>

<div style="display:inline; color: red">Choose Location:</div>
<div style="align: right;display:inline;">
    <select onchange="selectionChanged(this.value);">
        <option value="https://pannellum.org/images/alma.jpg">Level 1</option>
        <option value="https://pannellum.org/images/jfk.jpg">Level 2</option>
        <option value="https://pannellum.org/images/alma.jpg">Level 3</option>
        <option value="https://pannellum.org/images/alma.jpg">Level 4</option>
    </select>
</div>
<div id="panorama"></div>

<script type="text/javascript">
pannellum.viewer('panorama', {
            "type": "equirectangular",
            "panorama": "https://pannellum.org/images/alma.jpg",
            "autoLoad": true,
            "autoRotate": -2,
            "title": '',
        });
</script>


功能选择已更改（值）
{
document.getElementById（“全景”）.innerHTML=''；
pannellum.viewer（‘全景’{
“类型”：“等矩形”，
“全景”：价值观，
“自动加载”：正确，
“自动旋转”：-2，
“标题”：价值
});
}
选择位置：
一级
二级
三级
四级
pannellum.viewer（‘全景’{
“类型”：“等矩形”，
“全景”：https://pannellum.org/images/alma.jpg",
“自动加载”：正确，
“自动旋转”：-2，
“标题”：“，
});

并在调用该函数时更新“全景”属性中的图像链接



功能选择已更改（值）
{
document.getElementById（“全景”）.innerHTML=''；
pannellum.viewer（‘全景’{
“类型”：“等矩形”，
“全景”：价值观，
“自动加载”：正确，
“自动旋转”：-2，
“标题”：价值
});
}
选择位置：
一级
二级
三级
四级
pannellum.viewer（‘全景’{
“类型”：“等矩形”，
“全景”：https://pannellum.org/images/alma.jpg",
“自动加载”：正确，
“自动旋转”：-2，
“标题”：“，
});
请尝试此操作，您可以在选择下拉菜单时使用更改。
如果需要，可以根据选定的下拉列表更改图像


var valueSelect=“1级”；
var setImage=”https://pannellum.org/images/alma.jpg";
$（'select level'）。在（'change'，function（）上{
valueSelect=this.value；
//根据“值”下拉列表更改图像
如果（值选择==“1级”）
{
设置图像=”https://pannellum.org/images/alma.jpg";
}
else if（valueSelect==“2级”）
{
设置图像=”https://pannellum.org/images/jfk.jpg";
}
else if（值选择==“3级”）
{
设置图像=”https://pannellum.org/images/alma.jpg";
}
//等等
//取下盘状物
$（'#panorama'）.html（''）；
//调用函数
showPannellum（设置图像，值选择）；
});
//第一次调用图像
showPannellum（设置图像，值选择）；
//函数显示pannellum
函数showPannellum（图像、值）{
pannellum.viewer（‘全景’{
“类型”：“等矩形”，
“全景”：图像，
“自动加载”：正确，
“自动旋转”：-2，
“标题”：价值
});
}
#全景{
宽度：600px；
高度：400px；
保证金：50px自动；
}

选择位置：
一级
二级
三级
四级
这意味着我应该使用图像链接作为
的值？我已经更新了答案并添加了代码片段。您可以运行该代码段来查看它是否正常工作。也许OP不想将整个库用于sinlge功能（参考jquery）。这种方法可能有效，但如果OP不使用给定的库，则可能会有一点开销。