リフレッシュ後にドロップダウンメニューからiframe srcを保持する

Question

iframe srcを更新するドロップダウンリストを作成しましたが、ユーザーがdropdown menuから変更しない限り、iframe srcは変更されません。 JavaScriptを使用していますか？

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

Answer 1

ここでは、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>Choose 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>

あなたのオプションの値は一意である必要があります解決策を持って行きます。

最後に選択したデータを保存するのにlocalStorageを使用しました。

希望すると、これが役立ちます。