Question

这里我有代码，我可以生成随机数并选择特定的下拉列表。如何选择特定列表中的特定数组。

function myfunction(){
  var selectedList=document.getElementById("selectedId").value;
  var result=generateRandomNumber();
      allArrays(result,selectedList);
}

function allArrays(result,selectedList){
  var fruitsArray=["apple","banana","mango","jack","kiwi"];
  var sportsArray=["cricket","baseball","volleyball","football","tennis"];
  var animalsArray=["monkey","donkey","dog","cat","rat"];
  var playersArray=["sachin","watson","gale","akram","narine"];
}

function generateRandomNumber(){
  var numberResult = Math.floor(Math.random() * 4) + 1;
  return numberResult ;
}

HTML

<select id="selectedId">
  <option value="fruits" onclick="myfunction(this.value)">fruits</option>
  <option value="sports" onclick="myfunction(this.value)">sports</option>
  <option value="animals" onclick="myfunction(this.value)">animals</option>
  <option value="players" onclick="myfunction(this.value)">players</option>
</select>

例如：如果我从警报中的下拉菜单中选择水果选项，我会获得成果，然后我会生成随机数。根据生成的随机数，如何从特定的（选定的列表数组）中获取相应的值，而其他数组不一定要初始化？

Answer 1

首先，将定义移出函数，否则根本无法访问它们。

现在他们已经全球化，您可以像以下一样访问它们：

window[selectedList + 'array']

Answer 2

<强> HTML

首先从onclick的内联HTML中删除option。

<select id="selectedId">
  <option value="fruits">fruits</option>
  <option value="sports">sports</option>
  <option value="animals">animals</option> 
  <option value="players">players</option>
</select>

<强> JS

然后使用JavaScipt将onclick个事件附加到option。我们使用[].slice.call将节点列表转换为数组，以便我们可以使用forEach。

var options = document.querySelectorAll('option');

[].slice.call(options).forEach(function (option) {
  option.onclick = myfunction;
});

包含数组的最好方法是将它们保存在一个对象中：

var arrays = {
  fruits: ["apple","banana","mango","jack","kiwi"],
  sports: ["cricket","baseball","volleyball","football","tennis"],
  animals: ["monkey","donkey","dog","cat","rat"],
  players: ["sachin","watson","gale","akram","narine"]
}

对于select更改时运行的函数：

function myfunction() {

  // grab the select element
  var select = document.getElementById("selectedId");

  // Get the value of the selected index, say "fruit"
  var value = select.options[select.selectedIndex].value;

  // and grab that array from the object of arrays
  var array = arrays[value];
  alert(array);

  // Then pluck a random element from the chosen array
  var result = array[generateRandomNumber()];
  alert(result);
}

function generateRandomNumber(){
  var numberResult = Math.floor(Math.random() * 4) + 1;
  return numberResult ;
}

DEMO

Answer 3

这是一个解决方案：

HTML：

<select id="selectedId">
    <option value="fruits" onclick="myfunction(this.value)">fruits</option>
    <option value="sports" onclick="myfunction(this.value)">sports</option>
    <option value="animals" onclick="myfunction(this.value)">animals</option>
    <option value="players" onclick="myfunction(this.value)">players</option>
</select>

JavaScript的：

function myfunction(res) {
    var array = allArrays(res);
    var result = generateRandomNumber(array.length);
    var randomItem = array[result];
    console.log(randomItem);
}

function allArrays(result) {
    var arrays = {
        fruitsArray: ["apple", "banana", "mango", "jack", "kiwi"],
        sportsArray: ["cricket", "baseball", "volleyball", "football", "tennis"],
        animalsArray: ["monkey", "donkey", "dog", "cat", "rat"],
        playersArray: ["sachin", "watson", "gale", "akram", "narine"]
    }
    return arrays[result + 'Array'];
}

function generateRandomNumber(length) {
    var numberResult = Math.floor(Math.random() * length);
    return numberResult;
}

演示here

但您不应在HTML中使用onclick或onchange属性：

HTML：

<select id="selectedId">
    <option value="">Choose</option>
    <option value="fruits">fruits</option>
    <option value="sports">sports</option>
    <option value="animals">animals</option>
    <option value="players">players</option>
</select>

JavaScript的：

function addEvent(elt, event, func) {
   if (elt.addEventListener)  // W3C DOM
      elt.addEventListener(event,func,false);
   else if (elt.attachEvent) { // IE DOM
      elt.attachEvent("on"+event, func);
   }
}

function myfunction(e) {
    var target = e.target || e.srcElement;
    var value = target.value;
    if (!value)
        return;
    var array = allArrays(target.value);
    var result = generateRandomNumber(array.length);
    var randomItem = array[result];
    console.log(randomItem);
}

function allArrays(result) {
    var arrays = {
        fruitsArray: ["apple", "banana", "mango", "jack", "kiwi"],
        sportsArray: ["cricket", "baseball", "volleyball", "football", "tennis"],
        animalsArray: ["monkey", "donkey", "dog", "cat", "rat"],
        playersArray: ["sachin", "watson", "gale", "akram", "narine"]
    }
    return arrays[result + 'Array'];
}

function generateRandomNumber(length) {
    var numberResult = Math.floor(Math.random() * length);
    return numberResult;
}

addEvent(window, 'load', function(e) {
    var selectId = document.getElementById('selectedId');
    addEvent(selectId, 'change', myfunction);
});

Deom here

当有多个数组时，如何在javascript中选择特定数组值？

3 个答案: