Question

我刚开始编写JS函数并努力使以下用例起作用：

根据HTML页面中下拉菜单的值，更改lodash函数中的变量，然后提交该变量以在HTML div中显示。

当我从更广泛的函数中拉出变量countryA和countryB时，除了从下面的空白输出中，我似乎什么都没得到。

>

非常感谢任何帮助：

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>

JS

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

Answer 1

几件事：

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

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

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

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

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

用下拉值替换函数变量（破折号）

1 个答案: