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

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>