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

这是配偶，工作和东西：

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

<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>到<select>的行为差异，以及我对两个工作所做的工作都是同一个任务。祝你有个愉快的一天并在这里发表评论，如果这对你有好处或者你有任何疑问的话。

Answer 2

让我们对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的图片和带有 ID <audio>的{{1}}元素 _{注意名称与 multimedia 部分的相似性。}

#audio

最后是魔术：

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

如何进行下拉菜单控制<audio>标记</audio>

2 个答案:

jsBin demo