如何从 HTML 选择选项填充对象的 javascript 数组

Question

我很难弄清楚如何使用来自 HTML 选择选项的不同值填充数组。

在 HTML 中，我有一个选择下拉列表：

<select id="Playlist">
    <option value="trance">TRANCE</option>
    <option value="house">HOUSE</option>
</select>

我想根据选择的选项填充具有不同值的“歌曲”对​​象数组。

对于“HOUSE”，歌曲将是

let songs = [
    {
      musicFile: "./music/mp3/Lasgo - Something .mp3",
      thumbnail: "./music/art/Lasgo - Something .jpg",
      contributor: " ",
      artist: "Lasgo",
      title: "Something",
      subtitle: " ",
      comment: "featuring Jelle van Dael"
    },
    {
      musicFile: "./music/mp3/Mason - You Are Not Alone .mp3",
      thumbnail: "./music/art/Mason - You Are Not Alone .jpg",
      contributor: " ",
      artist: "Mason",
      title: "You Are Not Alone",
      subtitle: " ",
      comment: "featuring Róisín Murphy"
}]

或者如果“TRANCE”是选定的选项，则相同的阵列世界具有不同的值

let songs = [
    {
      musicFile: "./music/mp3/Aalto - Rush (Super8 vs Orkidea Remix) .mp3",
      thumbnail: "./music/art/Aalto - Rush (Super8 vs Orkidea Remix) .jpg",
      contributor: " ",
      artist: "Aalto",
      title: "Rush",
      subtitle: "(Super8 vs Orkidea Remix)",
      comment: " "
    },
    {
      musicFile: "./music/mp3/Above & Beyond - 1001 .mp3",
      thumbnail: "./music/art/Above & Beyond - 1001 .jpg",
      contributor: " ",
      artist: "Above & Beyond",
      title: "1001",
      subtitle: " ",
      comment: " "
}]

我已经尝试了谷歌搜索的几种技术，但我似乎无法让它工作。

Answer 1

您可以在选择选项上收听更改，然后使用回调函数（或使用 onchange 事件）根据所选选项过滤您的歌曲。

您可以在数组上使用array.filter()方法来过滤歌曲

参见示例 =>

HTML

<select id="Playlist">
  <option value="TRANCE">TRANCE</option>
  <option value="HOUSE">HOUSE</option>
</select>

JS

  let songs = [{
    musicFile: "./music/mp3/Lasgo - Something .mp3",
    thumbnail: "./music/art/Lasgo - Something .jpg",
    contributor: " ",
    artist: "Lasgo",
    title: "Something",
    subtitle: " ",
    comment: "featuring Jelle van Dael",
    playlist: "HOUSE"
  },
    {
      musicFile: "./music/mp3/Mason - You Are Not Alone .mp3",
      thumbnail: "./music/art/Mason - You Are Not Alone .jpg",
      contributor: " ",
      artist: "Mason",
      title: "You Are Not Alone",
      subtitle: " ",
      comment: "featuring Róisín Murphy",
      playlist: "HOUSE"
    }, {
      musicFile: "./music/mp3/Aalto - Rush (Super8 vs Orkidea Remix) .mp3",
      thumbnail: "./music/art/Aalto - Rush (Super8 vs Orkidea Remix) .jpg",
      contributor: " ",
      artist: "Aalto",
      title: "Rush",
      subtitle: "(Super8 vs Orkidea Remix)",
      comment: " ",
      playlist: "TRANCE"
    },
    {
      musicFile: "./music/mp3/Above & Beyond - 1001 .mp3",
      thumbnail: "./music/art/Above & Beyond - 1001 .jpg",
      contributor: " ",
      artist: "Above & Beyond",
      title: "1001",
      subtitle: " ",
      comment: " ",
      playlist: "TRANCE"
    }]

  const select_option = document.querySelector("#Playlist");

  select_option.onchange = ()=> {
    const value = select_option.value;
    let filtered_songs;
    switch (value) {
      case "HOUSE":
        filtered_songs = songs.filter(song => song.playlist === value)
        break;

      case "TRANCE":
        filtered_songs = songs.filter(song => song.playlist === value)
        break;

      default:
        // add some code
      }
      console.log(filtered_songs)
    }

Answer 2

你可以这样做：

 const allSongs = { house: [{ musicFile: "./music/mp3/Lasgo - Something .mp3", thumbnail: "./music/art/Lasgo - Something .jpg", contributor: " ", artist: "Lasgo", title: "Something", subtitle: " ", comment: "featuring Jelle van Dael" }, { musicFile: "./music/mp3/Mason - You Are Not Alone .mp3", thumbnail: "./music/art/Mason - You Are Not Alone .jpg", contributor: " ", artist: "Mason", title: "You Are Not Alone", subtitle: " ", comment: "featuring Róisín Murphy" } ], trance: [{ musicFile: "./music/mp3/Aalto - Rush (Super8 vs Orkidea Remix) .mp3", thumbnail: "./music/art/Aalto - Rush (Super8 vs Orkidea Remix) .jpg", contributor: " ", artist: "Aalto", title: "Rush", subtitle: "(Super8 vs Orkidea Remix)", comment: " " }, { musicFile: "./music/mp3/Above & Beyond - 1001 .mp3", thumbnail: "./music/art/Above & Beyond - 1001 .jpg", contributor: " ", artist: "Above & Beyond", title: "1001", subtitle: " ", comment: " " } ] } let songs = [] document.querySelector('#Playlist').addEventListener('change', (event) => { const selected = event.target.value songs = allSongs[selected] })

 <select id="Playlist"> <option value="">Select genre</option> <option value="trance">Trance</option> <option value="house">House</option> </select>

Answer 3

我希望这可以帮助：

 let playList = {"house": [ { musicFile: "./music/mp3/Lasgo - Something .mp3", thumbnail: "./music/art/Lasgo - Something .jpg", contributor: " ", artist: "Lasgo", title: "Something", subtitle: " ", comment: "featuring Jelle van Dael" }, { musicFile: "./music/mp3/Mason - You Are Not Alone .mp3", thumbnail: "./music/art/Mason - You Are Not Alone .jpg", contributor: " ", artist: "Mason", title: "You Are Not Alone", subtitle: " ", comment: "featuring Róisín Murphy" }], "trance": [ { musicFile: "./music/mp3/Aalto - Rush (Super8 vs Orkidea Remix) .mp3", thumbnail: "./music/art/Aalto - Rush (Super8 vs Orkidea Remix) .jpg", contributor: " ", artist: "Aalto", title: "Rush", subtitle: "(Super8 vs Orkidea Remix)", comment: " " }, { musicFile: "./music/mp3/Above & Beyond - 1001 .mp3", thumbnail: "./music/art/Above & Beyond - 1001 .jpg", contributor: " ", artist: "Above & Beyond", title: "1001", subtitle: " ", comment: " " }] }; let songs = []; const playlistEl = document.querySelector("#Playlist"); songs = playList[playlistEl.value]; playlistEl.onchange = function(el) { songs = playList[this.value]; console.log(songs); }; console.log(songs);

 <select id="Playlist"> <option value="trance">TRANCE</option> <option value="house">HOUSE</option> </select>

Answer 4

您似乎想要根据所选选项过滤一组歌曲。 为此，您需要设置某种过滤数组的标识符。 所以例如：

let filteredSongs = []; // to be used later
let songs = [
 {
  type: "trance",
  title: "ab12",
  // rest of the properties
 },
 {
  type: "trance",
  title: "yz55",
  // rest of the properties
 },
 {
  type: "house",
  title: "ab12",
  // rest of the properties
 },
//... more such objects
]

对于您选择的onchange事件，您可以简单地过滤数组，如下所示：

function handleTypeChange(event){
 filteredSongs = songs.filter(s=> s.type === event.target.value);
}

因此，每次更改选项时，您都会重置已filteredSongs歌曲并获得所需的结果。 希望你明白。