Change image in javascript based on <select> dropdown

Question

I'm trying to make a simple single page that displays panorama image based on <select>.

My code:

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>

For example: If I choose for Level 1 from <select> , the image link in the <script> shall change. Any solutions that I can do that? I'm still a learner in javascript.

Answer 1

You should define a JavaScript function and attach select tag with event onclick, so that whenever it's value is changed, that javascript function will be called and changed value will be passed.

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

And update image link in panorama attribute whenever function is called.

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

Answer 2

Please try this, you can use on change when select dropdown. if you want you can change image base on selected dropdown.

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>