根据 <select> 下拉菜单更改 javascript 中的图像

Question

我正在尝试制作一个简单的单页，显示基于<select> 的全景图像。

我的代码：

pannellum.viewer('panorama', {
  "type": "equirectangular",
  "panorama": "https://pannellum.org/images/alma.jpg",
  "autoLoad": true,
  "autoRotate": -2,
  "title": "LEVEL 1"
});

<script src="https://cdn.pannellum.org/2.4/pannellum.js"></script>
<div style="display:inline; color: red">Choose Location:</div>
<div style="align: right;display:inline;">
  <select>
    <option value="Level 1">Level 1</option>
    <option value="Level 2">Level 2</option>
    <option value="Le4el 3">Level 3</option>
    <option value="Level 4">Level 4</option>
  </select>
</div>
<div id="panorama"></div>

例如：如果我从<select> 中选择Level 1，<script> 中的图像链接将会改变。我可以做到这一点的任何解决方案？我仍然是 javascript 的学习者。

Answer 1

请试试这个，您可以在选择下拉菜单时使用更改。 如果你愿意，你可以根据选定的下拉菜单更改图像。

var valueSelect = "Level 1";
var setImage = "https://pannellum.org/images/alma.jpg";

$('#select-level').on('change', function() {
  valueSelect = this.value;
  
  // change your image base on value dropdown
  if(valueSelect == "Level 1")
  {
    setImage = "https://pannellum.org/images/alma.jpg";
  }
  else if(valueSelect == "Level 2")
  {
    setImage = "https://pannellum.org/images/jfk.jpg";
  }
  else if(valueSelect == "Level 3")
  {
    setImage = "https://pannellum.org/images/alma.jpg";
  }
  // and so on
  
   // remove the pannellum
  $('#panorama').html('');
  // call the function
  showPannellum(setImage, valueSelect);
});

// call the image for first time
showPannellum(setImage, valueSelect);

// function show pannellum
function showPannellum(image, value){
  pannellum.viewer('panorama', {
      "type": "equirectangular",
      "panorama": image,
      "autoLoad": true,
      "autoRotate": -2,
      "title": value
  });
}

#panorama {
     width: 600px;
     height: 400px;
     margin: 50px auto;
   }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.pannellum.org/2.4/pannellum.css"/>
    <script type="text/javascript" src="https://cdn.pannellum.org/2.2/pannellum.js"></script>

<div style="display:inline; color: red">Choose Location:</div>
<div style="align: right;display:inline;">
    <select id="select-level">
        <option value="Level 1">Level 1</option>
        <option value="Level 2">Level 2</option>
        <option value="Level 3">Level 3</option>
        <option value="Level 4">Level 4</option>
    </select>
</div>
<div id="panorama"></div>

Answer 2

您应该定义一个 JavaScript 函数并附加带有事件 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>

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

<link rel="stylesheet" href="https://cdn.pannellum.org/2.4/pannellum.css"/>
    <script type="text/javascript" src="https://cdn.pannellum.org/2.2/pannellum.js"></script>
    
<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>