2

我有这个代码： 

<audio id="playme" src="audio/music.mp3" loop autoplay>Your browser...</audio>

<img id="pic" src="pic/pic1.jpg" height="95%" />


<p>
<input type="button" style="font-size: 10px;"
    OnClick="document.getElementById('playme').src='audio/music.mp3';"
    value="Lavender">

<input type="button" style="font-size: 10px;"
    OnClick="document.getElementById('playme').src='audio/music2.mp3';"
    value="Dyskietkowe BHG :D">

<p>

<input type="button" style="font-size: 10px;"
    OnClick="document.getElementById('pic').src='pic/pic1.jpg';"
    value="pic1">

<input type="button" style="font-size: 10px;"
    OnClick="document.getElementById('pic').src='pic/pic2.jpg';"
    value="inen pic1">

我想将这些按钮更改为两个下拉菜单( <select>)，
但我不知道该怎么做。

4

2 回答 2

0

让我们用 JS 来找点乐子，让我们的程序代替我们做所有的事情。
我们只需要设置：

  • 图片名称和网址
  • 歌曲名称和网址

jsBin 演示

var multimedia = {
  "audio" : [
     ["Lavender",           "audio/music.mp3"    ],
     ["Dyskietkowe BHG :D", "audio/me_guitar.ogg"]
  ],
  "image" : [
     ["Pic1",     "pic/pic1.jpg"],
     ["Inen pic", "pic/pic2.jpg"]
   ]
};

我们需要的是一个DIV容器#controllers，jQuery 将在其中放置我们的<select>元素，以及一个带有 ID 的图像和一个带有ID的 #audio元素<audio>注意名称与多媒体部分的相似性。 #audio

<div id="controllers"></div>
<img id="image" src="" />
<audio id="audio" src="" loop autoplay>
  Audio Not Supported
</audio>

最后是魔法：

for(var key in multimedia){ // 2 loops: audio, images
  if(multimedia.hasOwnProperty(key)){    

      // Create one Select element
      var newSelect = "<select name='"+ key +"'>",
          key = multimedia[key],
          keyN = key.length;
      // Fill it with Option elements
      for(var i=0; i<keyN; i++){ // loop separately (audios, images) contents
          newSelect += "<option value="+ key[i][1] +">"+ key[i][0] +"</option>"; 
      }
      newSelect += "</select>";
      // Append created select element
      $('#controllers').append( newSelect );

  }
}

$("#controllers").on('change', 'select', function(){
  $('#'+ this.name)[0].src = this.value;
}).find('select').trigger('change');
于 2013-11-10T05:28:58.327 回答
0

这是伙伴，工作和东西：

编辑：您的帖子被编辑为分成两个列表，所以这里是代码：

<audio id="playme" src="audio/music.mp3" loop autoplay>Your browser...</audio>

    <img id="pic" src="pic/pic1.jpg" height="95%" />

    <select id="fldSelectA" style="font-size: 10px;" >
        <option value="Lavender">Lavender</option>
        <option value="Dyskietkowe">Dyskietkowe BHG :D</option>
    </select>

    <select id="fldSelectB" style="font-size: 10px;" >
        <option value="pic1">pic1</option>
        <option value="inen">inen pic1</option>
    </select>

    <!-- if you already have jquery in your page, remove this line-->
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script>
    $("#fldSelectA").change(function(){
        switch($(this).find("option:selected").val()){
            case "Lavender":
                document.getElementById('playme').src='audio/music.mp3';
                break;
            case "Dyskietkowe":
                document.getElementById('playme').src='audio/music2.mp3';
                break;
        }
    });

    $("#fldSelectB").change(function(){
        switch($(this).find("option:selected").val()){
            case "pic1":
                document.getElementById('pic').src='pic/pic1.jpg';
                break;
            case "inen":
                document.getElementById('pic').src='pic/pic2.jpg';
                break;
        }
    });
    </script>

<button>注意从to 的行为差异<select>，以及我为这两个工作所做的工作都完成了相同的任务。祝您有美好的一天，如果这对您有好处或您有任何疑问，请在这里发表评论。

于 2013-11-10T04:37:36.500 回答