Question

嗨我有一个简单的下拉选项，允许用户选择一个声音，一旦他们决定点击播放按钮。它工作时，我只有一个声音可用，他们只需点击它，但现在我有多个声音，并希望提供一个下拉列表。我无法点击它。继承人我所拥有的。

＆＃13;

 var callButt = document.getElementById('callButt');
  var ringButt1 = document.getElementById("ringButt1");
  var play = document.getElementById("callButt");
  var player = document.getElementById("player");


      var num = -1;
      var rings = [];



      ringButt1.onclick = function(){
          rings.push("Basic_Bell.mp3");

      }

      callButt.addEventListener("click", function(){
      
         num++;
              if(num > rings.length-1){
                  num = -1;
                 
                  return false;
              }
              if(rings[num] != false){
                  player.src = rings[num];
                  player.play();
              }

      });

＆＃13;

<select>
 
  <option id='ringButt1'>Basic Bell</button>
  <option id='ringButt2'>Upbeat Bell</button>
  </select>
  <audio id='player'></audio>

  <button id='callButt'>CALL</button>

＆＃13;

所以我想要做的就是从选项中选择一个音频（之前我只是有一个按钮，我会点击它会将铃声发送到阵列，并在点击callButt后播放）发送给然后在我点击通话按钮时播放一个数组。我道歉，我明白，如果它没有任何意义......

Answer 1

您可以使用更改事件并处理选择更改（选项选择）

查看此内容以获取更多信息

article

Answer 2

您的代码中有一些可以改进的东西：

在HTML中，请注意您如何在<option>内打开<select>标记，而是关闭</button>。 select包含一组<option> s，如for example here所述。
在JS中，您并不需要检查＆＃34;点击＆＃34;在选择<option>上，您只对所选值感兴趣。正如@Partha所提到的那样，您可以只检查列表选择选项中的更改...但由于您有一个触发操作的按钮，因此甚至不需要这样做。当您即将播放声音时，您始终可以检查<select>列表的值，并相应地更改声源URL。

我重构了你的例子，一旦你点击按钮检查所选的值，然后检索声音URL并播放它。

＆＃13;

// Get references to HTML elements
var callButt = document.getElementById('callButt');
var animalSelector = document.getElementById("animalSelector");
var play = document.getElementById("callButt");
var player = document.getElementById("player");

// Keep a dictionary of sound urls by animal
var audioURLs = {
  "cats": "http://soundbible.com/mp3/Cat_Meow_2-Cat_Stevens-2034822903.mp3",
  "dogs": "http://soundbible.com/mp3/small-dog-barking_daniel-simion.mp3"
}

// When we detect a click on the button...
callButt.addEventListener("click", function(){
  // Retrieve the selected animal
  var selectedOption = animalSelector.value;
  
  // Check its sound URL from the dictionary
  var audioURL = audioURLs[selectedOption];
  
  // Update the player audio file and play it
  player.src = audioURL;
  player.play();
});

＆＃13;

<select id="animalSelector">
  <option value="cats">Hear cats</option>
  <option value="dogs">Hear dogs</option>
</select>
<audio id='player'></audio>
<button id='callButt'>CALL</button>

＆＃13;

单击属性下拉选择

2 个答案: