如何通过选择条件下拉列表来显示错误弹出窗口或警报消息

Question

我在悬停时创建了一个过滤下拉列表，通过从第一个下拉列表中选择悬停时的国家/地区名称，相应的目的地将显示在悬停时的第二个下拉列表中。

首先，如果鼠标悬停在目的地下拉菜单而不是国家/地区上，则需要显示错误消息，例如"首先选择国家/地区"。

这是完整的代码。

function changeddl(obj) {
var text = obj.options[obj.selectedIndex].text;
var ddl2 = document.querySelectorAll('#iOperation option');
for (var i = 1; i < ddl2.length; i++) {
var option = ddl2[i];
option.style.display = 'none';
if (text == 'Pick a Country') {
if (['Pick a Destination'].indexOf(option.text) > -1)
option.style.display = 'none'
}
if (text == 'India') {
if (['Bangalore', 'Delhi', 'Gujarat', 'Kerala', 'Kutch Desert', 'South Kerala', 'Tamil Nadu Forests', 'Mysore'].indexOf(option.text) > -1)
option.style.display = 'block'
}
if (text == 'Sri Lanka') {
if (['Sri Lanka', ].indexOf(option.text) > -1)
option.style.display = 'block'
}
if (text == 'Sweden') {
if (['Sweden'].indexOf(option.text) > -1)
option.style.display = 'block'
}
}
}
var countryArrays = [
['Bangalore', 'Delhi', 'Gujarat', 'Kerala', 'Kutch Desert ', 'South Kerala ', 'Tamil Nadu Forests ', 'Mysore '],
['Sweden'],
['Sri Lanka']
];
function DropNew() {
var index = document.getElementById("iFunction").selectedIndex - 1;
if (index >= 0) {
document.getElementById("iOperation").size = countryArrays[index].length + 1;
}
}
function DropList() {
var n = document.getElementById("iFunction").options.length;
document.getElementById("iFunction").size = 5;
}
function handleSelect(elm) {
window.location = elm.value;
}

option:hover {
background: #428ffa;
color: white;
}
#iOperation,
#iFunction {
overflow: hidden;
border: 2px solid black;
}
.hidden {
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height:10px; float:left">
<select id="iFunction" name="nFunction" onmouseover="DropList()" onmouseout="this.size=1;" onchange="changeddl(this)">
<option value="" selected="">Pick a Country</option>
<option value="">India</option>
<option value="">Sri Lanka</option>
<option value="">Sweden</option>
</select>
</div>
<div style="height: 10px; float: left; margin-left: 50px">
<select id="iOperation" onchange="location = this.value;" onmouseover="DropNew()" onmouseout="this.size=1;" name="nOperation">
<option value="" selected="">Pick a Destination</option>
<option class="hidden" value="https://www.amazon.in/">Bangalore</option>
<option class="hidden" value="https://www.flipkart.com/">Delhi</option>
<option class="hidden" value="https://www.snapdeal.com/">Gujarat</option>
<option class="hidden" value="https://www.paytm.com/">Kerala</option>
<option class="hidden" value="https://www.amazon.in/">Kutch Desert</option>
<option class="hidden" value="https://www.flipkart.com/">South Kerala</option>
<option class="hidden" value="https://www.snapdeal.com/">Tamil Nadu Forests</option>
<option class="hidden" value="https://www.snapdeal.com/">Mysore</option>
<option class="hidden" value="https://www.paytm.com/">Sri Lanka</option>
<option class="hidden" value="https://www.paytm.com/">Sweden</option>
</select>
</div>

Answer 1

function changeddl(obj) {
var text = obj.options[obj.selectedIndex].text;
var ddl2 = document.querySelectorAll('#iOperation option');
for (var i = 1; i < ddl2.length; i++) {
var option = ddl2[i];
option.style.display = 'none';
if (text == 'Pick a Country') {
if (['Pick a Destination'].indexOf(option.text) > -1)
option.style.display = 'none'
}
if (text == 'India') {
if (['Bangalore', 'Delhi', 'Gujarat', 'Kerala', 'Kutch Desert', 'South Kerala', 'Tamil Nadu Forests', 'Mysore'].indexOf(option.text) > -1)
option.style.display = 'block'
}
if (text == 'Sri Lanka') {
if (['Sri Lanka', ].indexOf(option.text) > -1)
option.style.display = 'block'
}
if (text == 'Sweden') {
if (['Sweden'].indexOf(option.text) > -1)
option.style.display = 'block'
}
}
}
var countryArrays = [
['Bangalore', 'Delhi', 'Gujarat', 'Kerala', 'Kutch Desert ', 'South Kerala ', 'Tamil Nadu Forests ', 'Mysore '],
['Sweden'],
['Sri Lanka']
];
function DropNew() {
var index = document.getElementById("iFunction").selectedIndex - 1;
if (index >= 0) {
document.getElementById("iOperation").size = countryArrays[index].length + 1;
} else {
$("#popup").show();
}
}
function hidePopup() {
$("#popup").hide();
}
function DropList() {
var n = document.getElementById("iFunction").options.length;
document.getElementById("iFunction").size = 5;
}
function handleSelect(elm) {
window.location = elm.value;
}

option:hover {
background: #428ffa;
color: white;
}
#iOperation,
#iFunction {
overflow: hidden;
border: 2px solid black;
}
.hidden {
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height:10px; float:left">
<select id="iFunction" name="nFunction" onmouseover="DropList()" onmouseout="this.size=1;" onchange="changeddl(this)">
<option value="" selected="">Pick a Country</option>
<option value="">India</option>
<option value="">Sri Lanka</option>
<option value="">Sweden</option>
</select>
</div>
<div style="height: 10px; float: left; margin-left: 50px">
<select id="iOperation" onchange="location = this.value;" onmouseover="DropNew()" onmouseout="this.size=1; hidePopup();" name="nOperation">
<option value="" selected="">Pick a Destination</option>
<option class="hidden" value="https://www.amazon.in/">Bangalore</option>
<option class="hidden" value="https://www.flipkart.com/">Delhi</option>
<option class="hidden" value="https://www.snapdeal.com/">Gujarat</option>
<option class="hidden" value="https://www.paytm.com/">Kerala</option>
<option class="hidden" value="https://www.amazon.in/">Kutch Desert</option>
<option class="hidden" value="https://www.flipkart.com/">South Kerala</option>
<option class="hidden" value="https://www.snapdeal.com/">Tamil Nadu Forests</option>
<option class="hidden" value="https://www.snapdeal.com/">Mysore</option>
<option class="hidden" value="https://www.paytm.com/">Sri Lanka</option>
<option class="hidden" value="https://www.paytm.com/">Sweden</option>
</select>
<div id="popup" class="hidden">Please select country first</div>
</div>

Answer 2

只需检查selectedIndex：

function DropNew() {
if(0 === document.getElementById("iFunction").selectedIndex){
alert('Please select country !');
return;
}
/* TO DO */
}