Updating the iFrame source using jQuery depending on the selection from a dropdown menu

I want to create a dynamic photosphere display within a div, where the source is determined by a selection from a drop-down menu.

The select menu will provide options for different rooms that the user can view, and the div will contain an iframe to showcase the photosphere.

Here is my current code snippet, although it is not functioning as expected:

<!-- SCRIPT FOR PHOTOSPHERE-->
    <script>
        $(document).ready(function(){

            // SELECT MENU
            $("#mySelect").change(function(){
                var value = $(this).val();   

                //IFRAME TAG
                $("#myPhotoSphere").attr
                var src = ($(this).attr('src') === 'photosphere_example.png')   
                $(this).attr('src', src);

                // Define sources based on selected room:
                if(value == "1")
                { $("#myPhotoSphere").attr("src","http://orb.photo/embedded_player.php?view=201712011cb4f0e032532a59807bea088f9ca145"); }

                else if(value == "2")
                { $("#myPhotoSphere").attr("src","http://orb.photo/embedded_player.php?view=20171201a1da59af307b44fa6dfa5ab2dfc157bd"); }

                else if(value == "3")
                { $("#myPhotoSphere").attr("src","http://orb.photo/embedded_player.php?view=2017120169fafbe2c0a507bbb06284857b3ea427"); }
                
                else if(value == "4")
                { $("#myPhotoSphere").attr("src","http://orb.photo/embedded_player.php?view=20171201a5853f710927d4a6b13909117b9ac85a"); }

                else if(value == "5")
                { $("#myPhotoSphere").attr("src"," http://orb.photo/embedded_player.php?view=20171201b19318b56e5168ce54ee5a2cc024c798"); }
            }); 
        });
    </script>

Below you'll find the HTML markup:

 <!-- VIRTUAL TOUR -->
        <select id="mySelect">
            <option value ="" disabled selected> Select a PhotoSphere </option>

            <option value="1"> Computing Classroom </option>
            <option value="2"> Common Room </option>
            <option value="3"> Lecture Theatre </option>
            <option value="4"> Atrium </option>
            <option value="5"> Coffee Shop </option>
        </select>

        <div>
            <iframe id="myPhotoSphere" src="http://orb.photo/embedded_player.php?view=201712011cb4f0e032532a59807bea088f9ca145" frameborder="0" scrolling="no" width="900" height="600">Please enable iframes to view content.</iframe>
        </div>

I'm currently stuck at a point where I am uncertain how to proceed, especially in terms of implementing jQuery functionalities. Any guidance would be greatly appreciated! (I'm relatively new to this programming concept).

Please forgive any errors or oversights made in my attempt thus far...

javascriptjqueryhtmlcssiframe

Answer №1

You may want to consider using this code snippet to streamline the process:

HTML

<!-- VIRTUAL TOUR -->
<select id="mySelect">
  <option value="" disabled selected> Select a PhotoSphere </option>
  <option value="http://www.google.com">Google</option>
  <option value="http://www.yahoo.com">Yahoo!</option>
  <option value="http://www.msn.com">MSN</option>
</select>

<div>
  <iframe id="myPhotoSphere" src="http://www.google.com" frameborder="0" scrolling="no" width="900" height="600"></iframe>
</div>

JAVASCRIPT

$(document).ready(function() {
  // SELECT MENU
  $("#mySelect").change(function() {
    var value = $(this).val();

    //IFRAME TAG
    console.log(value);
    $("#myPhotoSphere").attr('src', value);
  })
});

Here's an interactive demo (the links redirect to other jsfiddle examples of this setup): https://jsfiddle.net/j94geqt5/3/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Combining shared table rows with embedded ruby code in Javascript - is it possible?

I'm a new Javascript learner and I'm attempting to create a function that will merge rows with the same value (year in this case) and add their numbers together. Although my code isn't functioning as expected, it also doesn't seem to be ...

javascriptjqueryhtmlruby-on-railsruby

Could this be considered a typical trend - opting to return data instead of a promise?

I recently came across a new approach while reading 'Mean Machine'. Typically, I have always been taught to return a promise from a service to the controller and then handle it using .success or .then. In this case, the author is directly retur ...

javascriptangularjsajaxpromiseangularjs-service

What is the method for launching a standalone terminal window from a vscode extension?

I am in the process of creating a custom extension for Visual Studio Code. My goal is to open a separate terminal window and execute multiple commands consecutively, similar to Terminal.sendText but not within the integrated terminal. Is there a method to ...

javascriptnode.jstypescriptvisual-studio-codeterminal

Is iterating through object with a hasOwnProperty validation necessary?

Is there any benefit to using hasOwnProperty in a loop when an object will always have properties? Take this scenario: const fruits = { banana: 15, kiwi: 10, pineapple: 6, } for (let key in fruits) { if (fruits.hasOwnProperty(key)) { ...

javascriptnode.js

Is there a way to extract both a and b from the array?

I just started learning programming and I'm currently working on creating an API call to use in another function. However, I've hit a roadblock. I need to extract values for variables a and b separately from the response of this API call: import ...

javascripttypescript

What is the process for obtaining WOFF files from Google Fonts?

It appears that Google Fonts primarily provides fonts in WOFF2 format. Although this may be compatible with Chrome, WOFF2 is not widely supported by other browsers Is there a method to link directly to Google fonts stored on their CDN using a different f ...

cssfontscross-browsergoogle-font-api

Assigning alphanumeric characters to the axis for identification purposes

review the code in index.html <!DOCTYPE html> <html> <head> <title>D3 test</title> <style> .grid .tick { stroke: lightgrey; opacity: 0.7; } .grid path { stroke-width: 0; } .ch ...

javascripthtmlcsssvgd3.js

Is it possible to include two AJAX requests within a single function that both execute when the same submission occurs?

Having one submit button for a function necessitates the running of two ajax functions when the submit button is clicked for validation purposes. <div class="form-group btn-group"> <input type="button" class="btn btn-link" v ...

javascriptajaxcoldfusion

struggling to remove the jquery DataTable

I am trying to implement a functionality where a Button, when clicked, clears a data table and reloads it with fresh data. However, I am facing an issue where the data table is not getting cleared upon clicking the button. Below is the code snippet that I ...

jqueryhtmldatatables

Obtaining JavaScript data using Python Selenium Web Driver

I have been attempting to execute a javascript file within a Python script using Selenium WebDriver in order to retrieve the return value from the function. Despite my efforts and research, I have not been successful after spending several hours on this ta ...

javascriptpythonselenium

Utilizing jQuery to dynamically add or remove a class based on the selected radio button option

I am trying to achieve a functionality where checking one radio button will add a class to the label of another radio button, and unchecking it will remove that class. I have provided a Plunker example here. It seems simple but I'm having trouble gett ...

jqueryhtml

Tips for maintaining grid width when columns are rearranged in the column menu

Is it possible to stop jqgrid from changing its width to full screen after column selection? I attempted the code below, following guidance from How to change column name in column chooser pop up in jqgrid? My aim was to create a column switcher function ...

jqueryhtmlcssjqgridfree-jqgrid

Increasing the size of iframe in a Flexbox layout

I'm facing a challenge in making the iframe element stretch to occupy the remaining space within my web application. While I have ensured that the maximum space is allocated for the div by setting a border, the iframe's height does not automatica ...

htmlcssiframeflexbox

I'm struggling to concentrate and unable to type in the email field

Today while working on a website, I encountered something strange. In the footer section of the site, there is a quick contact form. However, I noticed that in Firefox, I am unable to focus on the email field. Surprisingly, this issue does not occur in Chr ...

javascriptcssdrupaldrupal-7drupal-webform

Using JavaScript/jQuery to Set a Timer for Animation with Google Maps Markers

After clicking a marker on a Google map, I've managed to make it bounce with the following code. However, I'm looking for a way to stop the animation after 2 seconds. Is there some kind of timer function that I can incorporate? Here's the ...

javascriptjquerygoogle-maps-markers

Creating a Dual Y-Axis Chart with Two Sets of Data in chart.js

I utilized the chart.js library to write the following code snippet that generated the output shown below. My primary concern is how to effectively manage the labels on the horizontal axis in this scenario. CODE <!DOCTYPE html> <html lang="en"& ...

javascripthtmlgraphchartschart.js

Tips for creating multiple files using nodejs and express

I am currently working on developing a personalized code editor that consists of 3 textareas: html, css, and javascript. The objective is to save the data from each textarea into individual files. With the help of express and nodejs, I have successfully m ...

javascriptnode.jsexpress

My tests are not passing because I included a compare method in the Array prototype. What steps can I take to fix this issue in either the

Embarking on the challenging Mars Rover Kata has presented a unique problem for me. My jasmine tests are failing because of my array compare method within the prototype. This method is crucial for detecting obstacles at specific grid points. For instance, ...

javascriptarraysjasmine

Tips for creating a hidden tab that only appears when hovered over

When hovering over the link tag .cat-link a.navlink, each subcategory tab .subcategories div is displayed. However, I would like to hide all tabs initially and have them appear only when hovered over with the mouse. Once the mouse is removed, I want the t ...

javascriptjqueryhtmlcss

Modifying the color of an SVG in real-time and using it as a texture in Three.js

I have been attempting to develop a configurator using three.js, but I am currently stuck at the stage where I need to dynamically change the color of the product. My initial idea was to use an SVG as a texture, modify the fill property of the SVG, and eas ...

javascriptsvgthree.js