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

How to select Particular Array value in javascript when there is multiple arrays?

本文关键字：数组 选择 特定数组 javascript      更新时间：2023-09-26

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

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>

例如：如果我在警报中从下拉菜单中选择了水果选项，我会得到水果，那么我会生成随机数。根据生成的随机数，我如何从属性（选定的列表数组）中获得相应的值，而其他数组则不必初始化？

这是一个解决方案：

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;
}

在这里演示

但是您不应该在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

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

既然它们是全球性的，你可以访问它们，比如：

window[selectedList + 'array']

HTML

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

<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 s。我们使用[].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

相关文章：