如何将hover应用于条件下拉列表

Question

我有两个条件下拉列表，会在点击时显示。第二个下拉列表将根据第一个下拉列表中选择的选项显示。

以下是完整的代码：

＆＃13;

＆＃13;

@model CustomerViewModel
.
.
.
.
@foreach(var shippingAddress in Model.ShippingAddresses)
{
    <label>@shippingAddress.Name</label>
}

＆＃13;

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

＆＃13;

.hidden {
  display: none;
}

＆＃13;

＆＃13;

＆＃13;

现在我希望在悬停时显示下拉列表而不是<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>。请帮助我怎样才能做到这一点。谢谢

Answer 1

你可以试试这个

＆＃13;

＆＃13;

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");
}
  

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;