Как применить наведите курсор на условный выпадающий

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'
    }
  }
}

.hidden {
  display: none;
}

<select id="iFunction" name="nFunction" onchange="changeddl(this)">
  <option value="" selected="">Pick a Country</option>
  <option value="">India</option>
  <option value="">Sri Lanka</option>
  <option value="">Sweden</option>

</select>

<select id="iOperation" onchange="location = this.value;" name="nOperation">
  <option value="" selected="">Pick a Destination</option>
  <option class="hidden" value="">Bangalore</option>
  <option class="hidden" value="">Delhi</option>
  <option class="hidden" value="">Gujarat</option>
  <option class="hidden" value="">Kerala</option>
  <option class="hidden" value="">Kutch Desert</option>
  <option class="hidden" value="">South Kerala</option>
  <option class="hidden" value="">Tamil Nadu Forests</option>
  <option class="hidden" value="">Mysore</option>
  <option class="hidden" value="">Sri Lanka</option>
  <option class="hidden" value="">Sweden</option>
</select>

Теперь я хочу, чтобы выпадающие списки отображались при наведении курсора вместо onclik.пожалуйста, помогите мне, как я могу это сделать.спасибо

Answer 1

Вы можете попробовать это

function changeddl(obj) {
console.log("dsds");
      var text = obj.options[obj.selectedIndex].text;
      var ddl2 = document.getElementById("iOperation");
      while (ddl2.options.length != 0) {
          ddl2.options[0] = null;
      }
      var option = document.createElement('option');
      option.text = option.value = "Pick a Destination";
      //ddl2.add(option, 0);
      let citylist = { "India": ['Bangalore', 'Delhi', 'Gujarat', 'Kerala', 'Kutch Desert', 'South Kerala', 'Tamil Nadu Forests', 'Mysore'], "Sri Lanka": ["Sri Lanka"], "Sweden": ["Sweden"] };
      let list = citylist[text];
      for (var i = 0; i < list.length; i++) {
          var option = document.createElement('option');
          option.focus();
          option.text = option.value = list[i];
          ddl2.add(option, i + 1);
      }
  }
   var ddldd = document.getElementById("iFunction");

   console.log(ddldd.options.length);
    for(var i=0;i  < ddldd.options.length;i++){
       console.log(ddldd.options[i]);
          ddldd.options[i].addEventListener("mouseover", function( event ) {
   console.log("fssd");
   
   });
      }
function myFunction(x) {
   console.log("fdfsdrfsdfssd");
}
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="iFunction" name="nFunction" onchange="changeddl(this)">
    <option value="" selected="">Pick a Country</option>
    <option value=""onfocus="myFunction(this)">India</option>
    <option value=""  onmouseover="myFunction(this)">Sri Lanka</option>
    <option value="">Sweden</option>
</select>

<select id="iOperation">
  
</select>