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

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>