1

私はjavascriptを学び始めたばかりで、ドロップダウンリストと選択時にdivを別のdivにロードすることに関して壁にぶつかったようです。ビデオが埋め込まれたさまざまなdivのリストにすぎないドロップダウンボックスを設定しています。選択すると、div がメイン div に読み込まれます

以下のコードは Firefox では動作しますが、Chrome や IE8 では動作しません。IE8 と Chrome はオプション タグ内に onclick があるのを好まないことを検索して読みました。正しい場合、以下のコードを 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>
4

2 に答える 2

2

これが機能するバージョンです。便宜上jQueryを使用していますが、標準のjavascript（用語を教えてください）を問題なく使用できます。

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

主な問題は、HTML が間違っていたことです。特に、selectタグだけでなくタグも閉じられていませんでしたoption。

私がしたことは、選択onChangeのイベント（オプションではありません！）をコンテンツを更新する関数にバインドするだけです。

この関数は、現在選択されている を検索し、optionその属性 (コンテンツをロードする div の ID) を読み取り、valueそれに応じてコンテンツを更新します。

$('select').change(function() {
    var domElement = $('select option:selected').attr('value');
    $('#videoPlayback').html($('#' +  domElement.toString()).html()); 
});
于 2011-06-15T06:54:43.337 に答える
1

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>
于 2011-06-15T07:20:13.517 に答える