如何在vanillaJS中获得两个不同的选择框值并显示基于值组合的结果



我需要根据用户选择的日期和月份组合向用户显示不同的结果(图片(。示例:如果您选择第1天和第3个月,您将根据您的选择收到警报,如果您选择了第3天和第6个月,则会收到不同的结果,等等。这就是我现在设法做到的:

像这样,我可以从两个选定的值中获得两个变量但无法通过比较变量m和变量d得到结果,因为它们在内部两种不同的功能。但它们需要具有两种不同的功能在每个选择框中调用onChange,对吗?什么是解决这个问题的好办法?感谢

<select class="sb"  id="day" onChange='getDay(this);'>
<option value="">Day</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>

<select class="sb"  id="month" onChange='getMonth(this);' >
<option value="">Month</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>

function getDay(sel) {
var d = (sel.options[sel.selectedIndex].text);
if (d == "01"){
console.log("day 1");
}
}


function gethMonth(sel) {
var m = (sel.options[sel.selectedIndex].text);
if (m == "Jan"){
console.log("January");
}
}````

function getData(e) {
var d = document.getElementById("day").value
var m = document.getElementById("month").value

// Do whatever you want with your two variables d and m
// for example console.log them
console.log(d + "." + m);
}
<select class="sb"  id="day" onChange='getData()'>
<option value="">Day</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>

<select class="sb"  id="month" onChange='getData()' >
<option value="">Month</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>

相关内容

  • 没有找到相关文章

最新更新