Изменить изображение в JavaScript на основе раскрывающегося списка <select>

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>

Например: если я выберу уровень 1 из <select>, ссылка на изображение в <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 и прикрепить тег select к событию onclick, чтобы при каждом изменении его значения вызывалась эта функция 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>

И обновлять ссылку на изображение в атрибуте Panorama при каждом вызове функции.

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