用下拉值替换函数变量（lodash）答案

【问题标题】：Replace function variables (lodash) with dropdown value用下拉值替换函数变量（lodash）
【发布时间】：2020-12-05 18:33:20
【问题描述】：

我是编写 JS 函数的新手，正在努力使以下用例工作：

根据 HTML 页面中下拉列表的值，更改 lodash 函数中的变量并将其提交以在 HTML div 中显示。

当我将变量 countryA 和 countryB 从更广泛的函数中拉出时，我似乎无法从以下得到任何空白输出，然后它可以工作，但在里面时却不行。

非常感谢任何帮助：

Codepen

HTML

<!DOCTYPE html>
<head>
</head>
<body>

  <h2>Auto populated dropdown</h2>
    
 <form id="myForm">
  <select id="selectCountry1">
  </select>
     <select id="selectCountry2">
  </select>
    <input id="searchCountry" type="button" value="Take me travelling"/>
</form> 
  
    
  <h2>Result</h2>
  <div id="travelResult"></div>
  
  </body>
</html>

const UK = [
    {id:'GB', name:'Great Britain', QT:'14 Day', info:'visit gov.uk'},
    {id:'CR', name:'Croatia', QT:'0 Day', info:'visit gov.uk/'},
    {id:'EU', name:'European Union', QT:'0 Day', info:'visit gov.uk/'},
    {id:'IRL', name:'Ireland', QT:'0 Day', info:'visit gov.uk/'}
 ];
const USA =[
    {id:'USA', name:'USA', QT:'14 Day', info:'visit gov.uk/'},
    {id:'CR', name:'Croatia', QT:'14 Day', info:'visit us.gov.croatia'},
    {id:'IRL', name:'Ireland', QT:'0 Day', info:'visit gov.uk/'}
 ];
const EU =[
    {id:'GB', name:'Great Britain', QT:'14 Day', info:'visit gov.uk/'},
    {id:'CR', name:'Croatia', QT:'14 Day', info:'visit us.gov.croatia'},
    {id:'IRL', name:'Ireland', QT:'0 Day', info:'visit gov.uk/'},
    {id:'EU', name:'European Union', QT:'0 Day', info:'visit gov.uk/'},
 ];
const IRL =[
    {id:'GB', name:'Great Britain', QT:'14 Day', info:'visit gov.uk/'},
    {id:'EU', name:'European Union', QT:'0 Day', info:'visit gov.uk/'},
    {id:'IRL', name:'Ireland', QT:'0 Day', info:'visit gov.uk/'}
 ];

const options = ["UK", "USA", "EU", "IRL"];

// Function to build a dropdown

var select = document.getElementById("selectCountry1"); 

for(var i = 0; i < options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
};

var select = document.getElementById("selectCountry2"); 

for(var i = 0; i < options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
};

// var countryA = UK;
// var countryB = USA;

// Function to compare everything

window.onload = function(){
    document.getElementById("searchCountry").onclick = resultSection;
};

function resultSection() {
  
    var e = document.getElementById("selectCountry1");
    var countryA = e.value;
    console.log(countryA);

    var f = document.getElementById("selectCountry2");
    var countryB = f.value;
    console.log(countryB);

    var result6 = _.intersectionBy(countryA, countryB, 'id');
  
    document.getElementById('travelResult').innerHTML = JSON.stringify(result6);
    console.log(result6)
};

编辑：更新：通过在返回时手动定义每个变量来使其工作，可能有更好的方法来做到这一点，但它可以工作！

    if (countryA === "UK"){
   var firstCountry = UK
 } else if (countryA === "USA") {
   var firstCountry = USA
 } else if (countryA === "EU") {
   var firstCountry = EU
 } else if (countryA === "IRL") {
   var firstCountry = IRL
 } else {
   var firstCountry = "Error"
 };
  
  if (countryB === "UK"){
   var secondCountry = UK
 } else if (countryB === "USA") {
   var secondCountry = USA
 } else if (countryB === "EU") {
   var secondCountry = EU
 } else if (countryB === "IRL") {
   var secondCountry = IRL
 } else {
   var secondCountry = "Error"
 };

【问题讨论】：

标签： javascript html arrays json lodash

【解决方案1】：

一些事情：

选择中的选项是一个 HTMLOptionsCollection，但是一个单独的选项值，例如e.options[e.selectedIndex].value; 是一个字符串。您可能可以对选定的值进行字符串比较，而不需要_.intersection，而只需使用===。
如果您想要<select> 元素的选定值，您可以调用e.value 而不是e.options[e.selectedIndex].value。
_.intersectionBy 返回两个数组与给定迭代的交集。您的值需要是数组，因此您可以像这样包装它们：

var result6 = _.intersectionBy([countryA], [countryB], 'id');

也不需要 iteratee，因为您正在处理可以直接比较的字符串。这意味着您可以使用：

var result6 = _.intersection([countryA], [countryB]);

最后，您可能会将 JS 选项数组与 HTML 选择选项混为一谈？您需要获取 select 中的值并在数组中找到与该选项对应的实体（比较值可能是一种好方法）。

【讨论】：

嗨，Ben，感谢您抽出宝贵时间回复。仍然在这里苦苦挣扎 - 我想做的就是使用下拉列表更改 _.intersectionBy 数组，不知道为什么这是一个如此大的挑战。我应该用什么词来搜索您推荐的解决方案？