更改选定选项关联的Cons

Question

我有以下Option select容器，我想将某些常量值分配给它：

<div class= "wrapper">
<div class = "option-control">
<form>
<h1> Please select a Servant class:</h1>
<div class="box">
Servant Class: <div class="inputWrap" class="input-field" id="subject">
<select name="servant-class" type="option" class="servant-class">
<option value=""></option>
<option value="0" selected>Please select from the following...</option>
<option value="Archer" >Archer</option>
<option value="Saber" >Saber</option>
<option value="Lancer" >Lancer</option>
<option value="Rider" >Rider</option>
<option value="Caster" >Caster</option>
<option value="Assassin" >Assassin</option>
<option value="Berserker" >Berserker</option>
<option value="Ruler" >Ruler</option>
<option value="Avenger" >Avenger</option>
<option value="Moon Cancer" >Moon Cancer</option>
<option value="Alter Ego" >Alter Ego</option>
<option value="Foreigner" >Foreigner</option>

</select></div><br>

例如，如果选项"；Saber"；如果选择了，我想将const saberTitles应用于URL映射。如果选择了另一个常量，则将应用其相应的常量。这是针对URL的If｛｝系列命令，还是针对servantTitles常量的其他命令？请注意，servantTitles代表原始测试，它将被我的新功能(如果适用(所取代。

const proxyurl = "https://cors-anywhere.herokuapp.com/";
const baseURL = 'https://fategrandorder.fandom.com/api.php';
const servantTitles = ['Artoria_Pendragon', 'Artoria_Pendragon_(Alter)', 'Artoria_Pendragon_(Lily)', 'Nero_Claudius', 'Siegfried', 'Gaius_Julius_Caesar', 'Altera', 'Gilles_de_Rais_(Saber)', "Chevalier_d'Eon", 'Okita_Sōji', 'Fergus_mac_Róich', 'Mordred', 'Nero_Claudius_(Bride)', 'Ryōgi_Shiki_(Saber)', 'Rama, Water_Iri', 'Lancelot_Saber', 'Gawain', 'Bedivere', 'Elizabeth_Báthory_(Brave)', 'Miyamoto_Musashi', 'Arthur_Pendragon_(Prototype)', 'Suzuka_Gozen', 'Frankenstein_(Saber)', 'Yagyū_Munenori', 'Sigurd', 'Medb_(Saber)', 'Diarmuid_Ua_Duibhne', 'Lanling_Wang', 'Beni-enma', 'Lakshmibai','Jason', 'Katsushika_Hokusai_(Saber)', 'Astolfo_(Saber)', 'Dioscuri', 'Tomoe_Gozen_(Saber)', 'Saitō_Hajime'];
const saberTitles = ['Artoria_Pendragon', 'Artoria_Pendragon_(Alter)', 'Artoria_Pendragon_(Lily)', 'Nero_Claudius', 'Siegfried', 'Gaius_Julius_Caesar', 'Altera', 'Gilles_de_Rais_(Saber)', "Chevalier_d'Eon", 'Okita_Sōji', 'Fergus_mac_Róich', 'Mordred', 'Nero_Claudius_(Bride)', 'Ryōgi_Shiki_(Saber)', 'Rama, Water_Iri', 'Lancelot_Saber', 'Gawain', 'Bedivere', 'Elizabeth_Báthory_(Brave)', 'Miyamoto_Musashi', 'Arthur_Pendragon_(Prototype)', 'Suzuka_Gozen', 'Frankenstein_(Saber)', 'Yagyū_Munenori', 'Sigurd', 'Medb_(Saber)', 'Diarmuid_Ua_Duibhne', 'Lanling_Wang', 'Beni-enma', 'Lakshmibai','Jason', 'Katsushika_Hokusai_(Saber)', 'Astolfo_(Saber)', 'Dioscuri', 'Tomoe_Gozen_(Saber)', 'Saitō_Hajime'];
const archerTitles = ['EMIYA', 'Gilgamesh', 'Robin_Hood', 'Atalanta', 'Euryale', 'Arash', 'Orion', 'David', 'Oda_Nobunaga', 'Nikola_Tesla', 'Arjuna', 'Kid_Gil', 'Billy_the_Kid', 'Tristan', 'Tawara_Tōta', 'Artoria_Pendragon_(Archer)', 'Anne_Bonny_&_Mary_Read_(Archer)', 'Chloe_von_Einzbern', 'Ishtar', 'James_Moriarty', 'EMIYA_(Alter)', 'Helena_Blavatsky_(Archer)', 'Tomoe_Gozen', 'Attila_the_San(ta)', 'Asagami_Fujino', 'Chiron', 'Napoléon', "Jeanne_d'Arc_(Archer)", 'William_Tell', 'Aśvatthāman', 'Paris', 'Osakabehime_(Archer)', 'Calamity_Jane', 'Nightingale_(Santa)', 'Sei_Shōnagon', 'Illyasviel_von_Einzbern_(Archer)', 'Oda_Nobukatsu'];
const lancerTitles = ['Cú_Chulainn', 'Elizabeth_Báthory','Musashibō_Benkei', 'Cú_Chulainn_(Prototype)', 'Leonidas_I', 'Romulus', 'Hector', 'Scáthach', 'Diarmuid_Ua_Duibhne', 'Artoria_Pendragon_(Lancer_Alter)', 'Karna', 'Fionn_mac_Cumhaill', 'Brynhildr', 'Li_Shuwen_(Lancer)',  'Artoria_Pendragon_(Lancer)', 'Tamamo_no_Mae_(Lancer)', 'Kiyohime_(Lancer)', 'Vlad_III_(EXTRA)', "Jeanne_d'Arc_(Alter)_(Santa_Lily)", 'Enkidu', 'Medusa_(Lancer)', 'Jaguar_Man', 'Minamoto_no_Raikō_(Lancer)', 'Parvati', 'Hōzōin_Inshun', 'Nezha', 'Ereshkigal', 'Valkyrie    Ibaraki_Dōji_(Lancer)', 'Qin_Liangyu', 'Bradamante', 'Nagao_Kagetora', 'Gareth', 'Mysterious_Alter_Ego_Λ', 'Caenis', 'Romulus-Quirinus', 'Utsumi_Erice', 'Consort_Yu_(Lancer)'];
const riderTitles = ['Medusa', 'Georgios', 'Edward_Teach', 'Boudica','Ushiwakamaru', 'Alexander', 'Marie_Antoinette', 'Martha   Francis_Drake', 'Anne_Bonny_&_Mary_Read', 'Artoria_Pendragon_(Santa_Alter)', 'Astolfo', 'Medb', 'Iskandar', 'Sakata_Kintoki_(Rider)', 'Ozymandias', 'Mordred_(Rider)', 'Quetzalcoatl', 'Christopher_Columbus', 'Artoria_Pendragon_(Rider_Alter)', 'Ishtar_(Rider)', 'Ivan_the_Terrible', 'Achilles', 'Sakamoto_Ryōma', 'Red_Hare', 'Sima_Yi_(Reines)', 'Leonardo_Da_Vinci_(Rider)', 'Bartholomew_Roberts', 'Carmilla_(Rider)', 'Mandricardo', 'Europa', 'Odysseus', 'Murasaki_Shikibu_(Rider)', 'Nemo'];
const assassinTitles = ['Sasaki_Kojirō', 'Hassan_of_the_Cursed_Arm', 'Stheno', 'Jing_Ke', 'Charles-Henri_Sanson', 'Phantom_of_the_Opera','Mata_Hari', 'Carmilla', 'Jack_the_Ripper', 'Henry_Jekyll_&_Hyde', 'Mysterious_Heroine_X', 'Ryōgi_Shiki_(Assassin)', 'EMIYA_(Assassin)', 'Hassan_of_the_Hundred_Faces', 'Shuten_Dōji', 'Fūma_Kotarō', 'Hassan_of_the_Serenity', 'Scáthach_(Assassin)', 'Cleopatra', '"The_Old_Man_of_the_Mountain"', 'Yan_Qing', 'Wu_Zetian', 'Nitocris_(Assassin)', 'Mochizuki_Chiyome', 'Katō_Danzō', 'Osakabehime', 'Semiramis', 'Okada_Izō', 'Ushiwakamaru_(Assassin)', 'Consort_Yu', 'Li_Shuwen', 'Kama', 'Gray', 'Charlotte_Corday', 'Okita_J_Sōji'];
const casterTitles = ['Medea', 'Gilles_de_Rais', 'Hans_Christian_Andersen', 'William_Shakespeare', 'Mephistopheles', 'Wolfgang_Amadeus_Mozart', 'Zhuge_Liang_(Lord_El-Melloi_II)', 'Cú_Chulainn_(Caster)', 'Elizabeth_Báthory_(Halloween)', 'Tamamo_no_Mae', 'Medea_(Lily)', 'Nursery_Rhyme', 'Paracelsus_von_Hohenheim', 'Charles_Babbage', 'Solomon', 'Helena_Blavatsky', 'Thomas_Edison', 'Geronimo', 'Irisviel_(Dress_of_Heaven)', 'Xuanzang_Sanzang', 'Nitocris', 'Leonardo_Da_Vinci', 'Marie_Antoinette_(Caster)', 'Illyasviel_von_Einzbern', 'Gilgamesh_(Caster)', 'Merlin', 'Solomon', 'Scheherazade', 'Nero_Claudius_(Caster)', 'Circe', 'Sieg', 'Queen_of_Sheba', 'Anastasia_Nikolaevna_Romanova', 'Avicebron', 'Scáthach-Skaði', 'Shuten_Dōji_(Caster)', 'Miyu_Edelfelt', 'Murasaki_Shikibu', 'Asclepius', 'Chen_Gong', 'Artoria_Caster'];
const berserkerTitles = ['Heracles', 'Lancelot', 'Lu_Bu_Fengxian', 'Spartacus', 'Sakata_Kintoki', 'Vlad_III', 'Asterios', 'Caligula Darius_III', 'Kiyohime', 'Eric_Bloodaxe','Tamamo_Cat', 'Frankenstein', 'Beowulf', 'Nightingale', 'Cú_Chulainn_(Alter)', 'Minamoto_no_Raikō', 'Ibaraki_Dōji', 'Mysterious_Heroine_X_(Alter)','Hijikata_Toshizō', 'Chacha', 'Penthesilea', 'Paul_Bunyan', 'Oda_Nobunaga_(Berserker)', 'Atalanta_(Alter)', "Jeanne_d'Arc_(Berserker_Alter)", 'Xiang_Yu', 'Arjuna_(Alter)', 'Mori_Nagayoshi', 'Salome','Miyamoto_Musashi_(Berserker)', 'Kijyo_Kōyō', 'Brynhildr_(Berserker)'];
const rulerTitles = ["Jeanne_d'Arc",'Amakusa_Shirō', 'Martha_(Ruler)', 'Sherlock_Holmes', 'Shi_Huang_Di', 'Quetzalcoatl_(Samba/Santa)', 'Astraea    Artoria_Pendragon_(Ruler)', 'Himiko'];
const avengerTitles = ['Edmond_Dantès', "Jeanne_d'Arc_(Alter)", 'Angra_Mainyu', 'Gorgon', 'Hessian_Lobo', 'Antonio_Salieri', 'Demon_King_Nobunaga', 'Space_Ishtar'];
const alteregoTitles = ['Meltlilith','Passionlip', 'Sesshōin_Kiara', 'Mecha_Eli-chan', 'Mecha_Eli-chan_MkII', 'Okita_Sōji_(Alter)', 'Sitonai', 'Kingprotea'];
const mooncancerTitles = ['BB','BB_(Summer)', 'Great_Statue_God', 'Sesshōin_Kiara_(Moon_Cancer)'];
const foreignerTitles = ['Abigail_Williams', 'Katsushika_Hokusai', 'Mysterious_Heroine_XX', 'Yang_Guifei', 'Voyager', 'Abigail_Williams_(Summer)', 'Van_Gogh'];

const URLs = servantTitles.map(title => `${proxyurl}${baseURL}?action=query&prop=revisions&titles=${title}&rvprop=content&format=json&origin=*`);

Answer 1

您可能应该更改存储数据的方式。您可以将标题存储在一个对象中，其中的键是您的"；类别"；(仆人、军刀等(，值为数组。您还应该将这些密钥与option的value相匹配。请使用<option value="alterego">Alter Ego而不是<option value="Alter Ego">Alter Ego。

在JS对象中，您可以通过其键轻松地获取项值。例如，如果const obj = {a: 1, b: 2, c: 3}和const selected = 'b'，那么obj[selected]将返回2，因为selected的值是b。

要监听输入更改，可以在select元素中添加一个事件侦听器，只要选择了新内容，就更新标题。

element.addEventListener()接受一个回调，您可以在其中获取所选option的值。一旦知道了这个值，就可以将它用作titles对象中的键。

查看下面的片段：

const proxyurl = 'https://cors-anywhere.herokuapp.com/';
const baseURL = 'https://fategrandorder.fandom.com/api.php';
const titles = {
servant: ['Artoria_Pendragon', 'Artoria_Pendragon_(Alter)', 'Artoria_Pendragon_(Lily)', 'Nero_Claudius', 'Siegfried', 'Gaius_Julius_Caesar', 'Altera', 'Gilles_de_Rais_(Saber)', "Chevalier_d'Eon", 'Okita_Sōji', 'Fergus_mac_Róich', 'Mordred', 'Nero_Claudius_(Bride)', 'Ryōgi_Shiki_(Saber)', 'Rama, Water_Iri', 'Lancelot_Saber', 'Gawain', 'Bedivere', 'Elizabeth_Báthory_(Brave)', 'Miyamoto_Musashi', 'Arthur_Pendragon_(Prototype)', 'Suzuka_Gozen', 'Frankenstein_(Saber)', 'Yagyū_Munenori', 'Sigurd', 'Medb_(Saber)', 'Diarmuid_Ua_Duibhne', 'Lanling_Wang', 'Beni-enma', 'Lakshmibai', 'Jason', 'Katsushika_Hokusai_(Saber)', 'Astolfo_(Saber)', 'Dioscuri', 'Tomoe_Gozen_(Saber)', 'Saitō_Hajime'],
saber: ['Artoria_Pendragon', 'Artoria_Pendragon_(Alter)', 'Artoria_Pendragon_(Lily)', 'Nero_Claudius', 'Siegfried', 'Gaius_Julius_Caesar', 'Altera', 'Gilles_de_Rais_(Saber)', "Chevalier_d'Eon", 'Okita_Sōji', 'Fergus_mac_Róich', 'Mordred', 'Nero_Claudius_(Bride)', 'Ryōgi_Shiki_(Saber)', 'Rama, Water_Iri', 'Lancelot_Saber', 'Gawain', 'Bedivere', 'Elizabeth_Báthory_(Brave)', 'Miyamoto_Musashi', 'Arthur_Pendragon_(Prototype)', 'Suzuka_Gozen', 'Frankenstein_(Saber)', 'Yagyū_Munenori', 'Sigurd', 'Medb_(Saber)', 'Diarmuid_Ua_Duibhne', 'Lanling_Wang', 'Beni-enma', 'Lakshmibai', 'Jason', 'Katsushika_Hokusai_(Saber)', 'Astolfo_(Saber)', 'Dioscuri', 'Tomoe_Gozen_(Saber)', 'Saitō_Hajime'],
archer: ['EMIYA', 'Gilgamesh', 'Robin_Hood', 'Atalanta', 'Euryale', 'Arash', 'Orion', 'David', 'Oda_Nobunaga', 'Nikola_Tesla', 'Arjuna', 'Kid_Gil', 'Billy_the_Kid', 'Tristan', 'Tawara_Tōta', 'Artoria_Pendragon_(Archer)', 'Anne_Bonny_&_Mary_Read_(Archer)', 'Chloe_von_Einzbern', 'Ishtar', 'James_Moriarty', 'EMIYA_(Alter)', 'Helena_Blavatsky_(Archer)', 'Tomoe_Gozen', 'Attila_the_San(ta)', 'Asagami_Fujino', 'Chiron', 'Napoléon', "Jeanne_d'Arc_(Archer)", 'William_Tell', 'Aśvatthāman', 'Paris', 'Osakabehime_(Archer)', 'Calamity_Jane', 'Nightingale_(Santa)', 'Sei_Shōnagon', 'Illyasviel_von_Einzbern_(Archer)', 'Oda_Nobukatsu'],
lancer: ['Cú_Chulainn', 'Elizabeth_Báthory', 'Musashibō_Benkei', 'Cú_Chulainn_(Prototype)', 'Leonidas_I', 'Romulus', 'Hector', 'Scáthach', 'Diarmuid_Ua_Duibhne', 'Artoria_Pendragon_(Lancer_Alter)', 'Karna', 'Fionn_mac_Cumhaill', 'Brynhildr', 'Li_Shuwen_(Lancer)', 'Artoria_Pendragon_(Lancer)', 'Tamamo_no_Mae_(Lancer)', 'Kiyohime_(Lancer)', 'Vlad_III_(EXTRA)', "Jeanne_d'Arc_(Alter)_(Santa_Lily)", 'Enkidu', 'Medusa_(Lancer)', 'Jaguar_Man', 'Minamoto_no_Raikō_(Lancer)', 'Parvati', 'Hōzōin_Inshun', 'Nezha', 'Ereshkigal', 'Valkyrie    Ibaraki_Dōji_(Lancer)', 'Qin_Liangyu', 'Bradamante', 'Nagao_Kagetora', 'Gareth', 'Mysterious_Alter_Ego_Λ', 'Caenis', 'Romulus-Quirinus', 'Utsumi_Erice', 'Consort_Yu_(Lancer)'],
rider: ['Medusa', 'Georgios', 'Edward_Teach', 'Boudica', 'Ushiwakamaru', 'Alexander', 'Marie_Antoinette', 'Martha   Francis_Drake', 'Anne_Bonny_&_Mary_Read', 'Artoria_Pendragon_(Santa_Alter)', 'Astolfo', 'Medb', 'Iskandar', 'Sakata_Kintoki_(Rider)', 'Ozymandias', 'Mordred_(Rider)', 'Quetzalcoatl', 'Christopher_Columbus', 'Artoria_Pendragon_(Rider_Alter)', 'Ishtar_(Rider)', 'Ivan_the_Terrible', 'Achilles', 'Sakamoto_Ryōma', 'Red_Hare', 'Sima_Yi_(Reines)', 'Leonardo_Da_Vinci_(Rider)', 'Bartholomew_Roberts', 'Carmilla_(Rider)', 'Mandricardo', 'Europa', 'Odysseus', 'Murasaki_Shikibu_(Rider)', 'Nemo'],
assassin: ['Sasaki_Kojirō', 'Hassan_of_the_Cursed_Arm', 'Stheno', 'Jing_Ke', 'Charles-Henri_Sanson', 'Phantom_of_the_Opera', 'Mata_Hari', 'Carmilla', 'Jack_the_Ripper', 'Henry_Jekyll_&_Hyde', 'Mysterious_Heroine_X', 'Ryōgi_Shiki_(Assassin)', 'EMIYA_(Assassin)', 'Hassan_of_the_Hundred_Faces', 'Shuten_Dōji', 'Fūma_Kotarō', 'Hassan_of_the_Serenity', 'Scáthach_(Assassin)', 'Cleopatra', '"The_Old_Man_of_the_Mountain"', 'Yan_Qing', 'Wu_Zetian', 'Nitocris_(Assassin)', 'Mochizuki_Chiyome', 'Katō_Danzō', 'Osakabehime', 'Semiramis', 'Okada_Izō', 'Ushiwakamaru_(Assassin)', 'Consort_Yu', 'Li_Shuwen', 'Kama', 'Gray', 'Charlotte_Corday', 'Okita_J_Sōji'],
caster: ['Medea', 'Gilles_de_Rais', 'Hans_Christian_Andersen', 'William_Shakespeare', 'Mephistopheles', 'Wolfgang_Amadeus_Mozart', 'Zhuge_Liang_(Lord_El-Melloi_II)', 'Cú_Chulainn_(Caster)', 'Elizabeth_Báthory_(Halloween)', 'Tamamo_no_Mae', 'Medea_(Lily)', 'Nursery_Rhyme', 'Paracelsus_von_Hohenheim', 'Charles_Babbage', 'Solomon', 'Helena_Blavatsky', 'Thomas_Edison', 'Geronimo', 'Irisviel_(Dress_of_Heaven)', 'Xuanzang_Sanzang', 'Nitocris', 'Leonardo_Da_Vinci', 'Marie_Antoinette_(Caster)', 'Illyasviel_von_Einzbern', 'Gilgamesh_(Caster)', 'Merlin', 'Solomon', 'Scheherazade', 'Nero_Claudius_(Caster)', 'Circe', 'Sieg', 'Queen_of_Sheba', 'Anastasia_Nikolaevna_Romanova', 'Avicebron', 'Scáthach-Skaði', 'Shuten_Dōji_(Caster)', 'Miyu_Edelfelt', 'Murasaki_Shikibu', 'Asclepius', 'Chen_Gong', 'Artoria_Caster'],
berserker: ['Heracles', 'Lancelot', 'Lu_Bu_Fengxian', 'Spartacus', 'Sakata_Kintoki', 'Vlad_III', 'Asterios', 'Caligula Darius_III', 'Kiyohime', 'Eric_Bloodaxe', 'Tamamo_Cat', 'Frankenstein', 'Beowulf', 'Nightingale', 'Cú_Chulainn_(Alter)', 'Minamoto_no_Raikō', 'Ibaraki_Dōji', 'Mysterious_Heroine_X_(Alter)', 'Hijikata_Toshizō', 'Chacha', 'Penthesilea', 'Paul_Bunyan', 'Oda_Nobunaga_(Berserker)', 'Atalanta_(Alter)', "Jeanne_d'Arc_(Berserker_Alter)", 'Xiang_Yu', 'Arjuna_(Alter)', 'Mori_Nagayoshi', 'Salome', 'Miyamoto_Musashi_(Berserker)', 'Kijyo_Kōyō', 'Brynhildr_(Berserker)'],
ruler: ["Jeanne_d'Arc", 'Amakusa_Shirō', 'Martha_(Ruler)', 'Sherlock_Holmes', 'Shi_Huang_Di', 'Quetzalcoatl_(Samba/Santa)', 'Astraea    Artoria_Pendragon_(Ruler)', 'Himiko'],
avenger: ['Edmond_Dantès', "Jeanne_d'Arc_(Alter)", 'Angra_Mainyu', 'Gorgon', 'Hessian_Lobo', 'Antonio_Salieri', 'Demon_King_Nobunaga', 'Space_Ishtar'],
alterego: ['Meltlilith', 'Passionlip', 'Sesshōin_Kiara', 'Mecha_Eli-chan', 'Mecha_Eli-chan_MkII', 'Okita_Sōji_(Alter)', 'Sitonai', 'Kingprotea'],
mooncancer: ['BB', 'BB_(Summer)', 'Great_Statue_God', 'Sesshōin_Kiara_(Moon_Cancer)'],
foreigner: ['Abigail_Williams', 'Katsushika_Hokusai', 'Mysterious_Heroine_XX', 'Yang_Guifei', 'Voyager', 'Abigail_Williams_(Summer)', 'Van_Gogh'],
}
function getURLs(titles) {
return titles.map(title => `${proxyurl}${baseURL}?action=query&prop=revisions&titles=${title}&rvprop=content&format=json&origin=*`);
}
document
.querySelector('select')
.addEventListener('change', function(event) {
const { value } = event.target;

if (!value) {
console.log('No option selected');
return;
}
const selected = titles[value];
console.log(getURLs(selected));
});

<form>
<h1> Please select a Servant class:</h1>
<div class="box">
Servant Class:
<div class="inputWrap" class="input-field" id="subject">
<select name="servant-class" type="option" class="servant-class">
<option value="" selected>Please select from the following...</option>
<option value="archer">Archer</option>
<option value="saber">Saber</option>
<option value="lancer">Lancer</option>
<option value="rider">Rider</option>
<option value="caster">Caster</option>
<option value="assassin">Assassin</option>
<option value="berserker">Berserker</option>
<option value="ruler">Ruler</option>
<option value="avenger">Avenger</option>
<option value="mooncancer">Moon Cancer</option>
<option value="alterego">Alter Ego</option>
<option value="foreigner">Foreigner</option>
</select>
</div>
</div>
</form>