如何解决用下拉值替换函数变量破折号
我刚开始编写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',{id:'IRL',name:'Ireland',info:'visit gov.uk/'}
];
const USA =[
{id:'USA',name:'USA',info:'visit us.gov.croatia'},info:'visit gov.uk/'}
];
const EU =[
{id:'GB',];
const IRL =[
{id:'GB',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"
};
解决方法
几件事:
-
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中取值,并在数组中找到与该选项相对应的实体(比较值可能是一个好方法)。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。