Preserve the iframe src value in the dropdown menu even after the page is refreshed

I am trying to figure out how to prevent the iframe src from changing when I refresh the page, unless the user manually changes it using the dropdown menu with JavaScript. Can someone help me with this?

<div class="row">
  <div class="span9">
    <ul class="thumbnails">
      <li class="span9">
        <select onchange="loadFrame(this.value,'starterVID');this.selectedIndex=0;">
          <option>Choose A View</option>
          <option value="yahoo.com">Vid02</option>
          <option value="youtube.com/">Vid03</option>
          <option value="google.com">Vid04</option>
          <option value="google.com">Vid05</option>
          <option value="google.com">Vid06</option>
          <option value="google.com">Vid07</option>
          <option value="google.com">Vid08</option>
          <option value="google.com">Vid09</option>
          <option value="google.com">Vid10</option>
        </select>
        <div class="flex-video widescreen vimeo">
          <iframe name = "starterVID" 
                  id = "starterVID" 
                  width="870" 
                  height="498" 
                  src="https://www.youtube.com/" 
                  frameborder="0" 
                  allowfullscreen>
          </iframe>
        </div>
      </li>
    </ul>
  </div>
</div>
javascriptjqueryhtmliframe

Answer №1

Check out the solution https://jsfiddle.net/cb10bwkL/2/

loadFrame = function(val, id){
  localStorage.setItem(id, val);
  $('#' + id).attr('src', val);
}

if(typeof localStorage.getItem('starterVID') != 'undefined'){
  $('select').val(localStorage.getItem('starterVID'));
  $('#starterVID').attr('src', localStorage.getItem('starterVID'))
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="span9">
    <ul class="thumbnails">
      <li class="span9">
        <select onchange="loadFrame(this.value,'starterVID');this.selectedIndex=0;">
          <option>Select a View</option>
          <option value="yahoo.com">Vid02</option>
          <option value="youtube.com">Vid03</option>
          <option value="google.com">Vid04</option>
        </select>
        <div class="flex-video widescreen vimeo">
          <iframe name = "starterVID" 
                  id = "starterVID" 
                  width="870" 
                  height="498" 
                  src="https://www.youtube.com/" 
                  frameborder="0" 
                  allowfullscreen>
          </iframe>
        </div>
      </li>
    </ul>
  </div>
</div>

Make sure your option values are unique for best results.

The implementation utilizes localStorage to preserve selected data.

Hope this solution proves helpful!

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

What is the best way to interact with an element in Python Selenium once it has been located?

I have been working on a script that is supposed to retrieve the attribute of an element and then click on it if the value is true. However, I keep encountering an error in my code. This is the snippet of code I am using: from selenium import webdriver d ...

pythonhtmlcsspython-3.xselenium

What advantages does using ImageMagick to resize images offer compared to using CSS?

My Ruby on Rails application has a feature that allows users to upload images. I have discovered that Active Storage can utilize ImageMagick to resize images using this code: model.image.variant(resize: "100X100") However, resizing images can also be ach ...

htmlcssruby-on-railsimage-processingimagemagick

The introduction of an underscore alters the accessibility of a variable

When working in Angular, I encountered a scenario where I have two files. In the first file, I declared: private _test: BehaviorSubject<any> = new BehaviorSubject({}); And in the second file, I have the following code: test$: Observable<Object& ...

javascriptangulartypescript

Utilizing NodeJS and Express to enhance the client side for showcasing an uploaded file

My knowledge of nodeJS, AJAX requests, and routing is still in its infancy. After following a tutorial on nodejs and express examples, I managed to get everything working on the server-side. However, I'm facing difficulty displaying the uploaded file ...

javascriptnode.jsajaxexpressroutes

What is the most effective method to implement an isLoggedIn function in AngularJS that is accessible from any controller or template?

I'm looking to create an isLoggedIn() function that can be accessed by both controllers and templates. Templates need this function to execute something like ng-show="isLoggedIn()". What would be the most efficient way to achieve this? If using a ser ...

javascriptangularjs

Error: The React styleguidist encountered a ReferenceError due to the absence of the defined

After integrating react styleguidist into my project, I encountered an issue when running npm run styleguidist. The error message states: ReferenceError: process is not defined Here is a snippet from my styleguide.config.js file: module.exports = { ti ...

javascriptreactjswebpack

I experienced an issue with Firestore where updating just one data field in a document caused all the other data to be wiped out and replaced with empty Strings

When updating data in my Firestore document, I find myself inputting each individual piece of data. If I try to edit the tag number, it ends up overwriting the contract number with an empty string, and vice versa. This issue seems to stem from the way th ...

javascriptreactjsionic-frameworkgoogle-cloud-firestoreuse-effect

Is it possible to identify a legitimate JSONP response?

My goal is to exchange data with a web service on a separate server that lacks CORS support. I am required to utilize JSONP for this purpose. The service mandates authentication, and when the user is in an SSO environment, they are seamlessly passed throug ...

javascriptajaxjquery

Leveraging the wheelDelta property in the onmousewheel event handler with Script#

When working with Script#, I often utilize mouse events using the ElementEvent argument. However, one thing seems to be missing - the WheelDelta property for handling the onmousewheel event. Can anyone provide guidance on how to access this property in t ...

c#javascriptmouseeventmousewheelscript#

How can I add navigation dots to my slider?

I've been experimenting with my slider and I managed to make it slide automatically. However, the issue is that there is no option to manually navigate through the slides. I am looking to add navigation dots at the bottom so users can easily switch be ...

javascriptjqueryhtmlcssslider

Rewriting Next.js with custom headers

My web app allows users to create their own profiles with custom usernames, which can be accessed via the following URLs. ourplatform.com/john ourplatform.com/john/about ourplatform.com/john/contact ourplatform.com/jane ourplatform.com/jane/about ourplatf ...

javascriptnginxnext.jshttp-headers

Having trouble getting $compile to work in an injected cshtml file with Angular

Summary I am currently working on a large application where everything is designed to be very generic for easy expansion. One of the components I am focusing on is the dialog. Before suggesting alternatives like using ngInclude or angular templates, let m ...

javascriptjqueryhtmlangularjsasp.net-mvc

The hover effects cease before the cursor is even shifted

Can someone explain why the hover effect stops before the mouse is moved off the element? I implemented the hover effect on a before pseudo element. ...

htmlcsshover

I encountered an issue with rate-limiter-flexible where I received an error stating that the Lua redis() command arguments need to be either

I have implemented rate limiting using the rate-limiter-flexible library const redis = require('redis'); const { RateLimiterRedis } = require('rate-limiter-flexible'); This is the code snippet I am working with // Create a Redis client ...

javascriptnode.jsrate-limiting

Yii, the datepicker does not have the functionality to stack options

Initially, I had a datepicker set up to prevent users from selecting days before the current day. However, I decided to incorporate a new function called DisableMondays which disables all Mondays. But after adding this function, I noticed that I was able ...

jqueryyiidatepicker

The SVG icon displays properly when viewed on a local machine, but is missing when the website is deployed

Something strange is happening with my SVG sprites. Everything seems to be working fine when I test my code locally, but once deployed on Firebase, one of the SVG images fails to appear. What could be causing this issue? Below is the code for two SVGs: sm ...

htmlcssreactjssvg

What are some ways to track the loading progress of a JSON file retrieved through an Axios call?

To track progress accurately, I am contemplating implementing the following steps while making an axios call: Retrieve file size during the json file request Determine the percentage of downloaded file size from the network tab Currently, I only have a ...

javascriptaxios

Angular: Exploring the possibilities of condition-based click event implementation

In my component, there are two elements: 'order information' and a 'datepicker'. When clicking on the component, it will display the order information. However, I want to prevent the click event from being triggered if the user clicks ...

javascriptangulartypescript

Upon attempting to add a new component, an error was encountered: Uncaught SyntaxError: Unexpected token export

I have created a React test project and added modules to my package.json as follows: { "name": "untitled", "version": "0.1.0", "private": true, "devDependencies": { "babel-preset-node5": "^12.0.1", "react-scripts": "0.9.5" }, "depe ...

javascriptreactjs

Unable to input text using Python Selenium in a textbox

Currently, I am attempting to input text into a specific textarea HTML element using Python Selenium: <div class="spk-c spH-d"><div id="gwt-uid-23" class="sppb-a"> <div class="sppb-b spk-b">For example, flowers or used cars</div> & ...

javascriptpythonseleniumwebdriver