jquery - 如何制作下拉菜单控制标签

Question

我有这段代码:

<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> ),
但我不知道该怎么做。

Answer 1

让我们用 JS 玩得开心，让我们的程序代替我们做所有的事情。
我们只需要设置:

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

jsBin demo

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 #audio 的图像和一个 <audio>具有 ID 的元素 #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');