基于<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

请尝试此选项，您可以在选择下拉列表时使用on change。如果需要，您可以根据所选下拉菜单更改图像。

​

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>

​