Выбор из выпадающего списка, который загружает div в другой div (IE8, Chrome) - PullRequest
Новая
       17

Выбор из выпадающего списка, который загружает div в другой div (IE8, Chrome)

1 голос
/ 15 июня 2011

Я только начинаю изучать javascript, и мне кажется, что я наткнулся на стену с раскрывающимся списком и загружаю div в другой div при выборе. Я настраиваю выпадающий список, который представляет собой не что иное, как список различных элементов div со встроенными видео. Когда выбрано, я хочу, чтобы div загружался в основной div

Теперь приведенный ниже код работает на Firefox, но не на Chrome или IE8. Я искал и читал, что IE8 и Chrome не нравится, когда он нажимает внутри тега option. Если это правда, как мне сделать код ниже полезным для IE8 и Chrome?

Что я пробовал до сих пор:

Используя onsubmit и добавив кнопку отправки - не удалось заставить его работать

Использование onchange - не удалось заставить его работать!

В этот момент я не удивлюсь, если я просто неправильно использую обработчики событий и, возможно, моя функция не зашла достаточно далеко, но я застрял в течение нескольких часов, пытаясь использовать разные вещи безрезультатно.

Есть предложения? 

     <div id="videodiv" style='display: none'> Some embedded video code</div>

     <div id="videodiv2" style='display: none'> Different Embedded video code</div>

     <div id="videoPlayback"> The div where all the embedded videos will end up loading</div>     


      <script type="text/javascript">
      function playVideo(sourceId, targetId) {
      if (typeof(sourceId)=='string') {sourceId=document.getElementById(sourceId);}
      if (typeof(targetId)=='string') {targetId=document.getElementById(targetId);}
      targetId.innerHTML=sourceId.innerHTML;
      return false;
                   }
      </script>

<select><option selected>Please Select...
<option onclick='return playVideo("videodiv2","videoPlayback")'>Video Div2>

Ответы [ 2 ]

2 голосов
/ 15 июня 2011

Вот версия, которая работает;он использует jQuery просто для удобства, но вы можете без проблем использовать стандартный javascript (передайте мне термин).

http://jsfiddle.net/MisterJack/qw6DL/

Основная проблема заключалась в том, что HTMLбыло неправильно, особенно тег select не был закрыт, а также тег option.

Я просто связал событие onChange select (не опция!) для функции, которая обновляет содержимое.

Эта функция ищет option, который выбран в данный момент, считывает его атрибут value (который является идентификатором div для загрузки содержимого)и обновляет содержимое соответствующим образом. 

$('select').change(function() {
    var domElement = $('select option:selected').attr('value');
    $('#videoPlayback').html($('#' +  domElement.toString()).html()); 
});
1 голос
/ 15 июня 2011

попробуйте это с помощью jquery: 

<div id="videodiv" style='display: none'> Some embedded video code</div>

     <div id="videodiv2" style='display: none'> Different Embedded video code</div>

     <div id="videoPlayback"> The div where all the embedded videos will end up loading</div>     
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

      <script type="text/javascript">
      var sourceDiv;
      var targetDiv;
      function playVideo(sourceId, targetId) {
      sourceDiv=$("#"+sourceId);
      targetDiv=$("#"+targetId);
      targetDiv.html(sourceDiv.html());
       }
      </script>

<select id="videos"><option selected="selected" >Please Select...</option>
<option value="videodiv">Video Div1</option>
<option value="videodiv2">Video Div2</option>
</select>


<script type="text/javascript">

function videoChanged() {
    //var videoSelectList = $('select#videos');
    var selectedValue = $('#videos').val();

    //alert(selectedValue);

    if (selectedValue != 'Please Select...') {
        playVideo(selectedValue,'videoPlayback');
    }
}

$(function() {
    //alert('my alert');
    $('select#videos').change(videoChanged);
});

</script>
...