如何解决下拉长度问题

Question

我在悬停时创建了过滤下拉菜单，通过从第一个下拉列表中选择悬停的国家/地区名称，相应的目的地将显示在悬停的第二个下拉列表中。这里的问题是当我们将鼠标悬停在目的地下拉列表时，下拉列表的长度显示高于列表项，

function DropList() {
	var n = document.getElementById("iFunction").options.length;
	document.getElementById("iFunction").size = n;
}

function handleSelect(elm){
	window.location = elm.value;
}

function DropNew() {
	var n = document.getElementById("iOperation").options.length;
	document.getElementById("iOperation").size = n;
}
        
function handleSelect(elm){
	window.location = elm.value;
}

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

option:hover {
	background: #428ffa;
	color: white;
}

.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.paytm.com/">Sri Lanka</option>
		<option class="hidden" value="https://www.paytm.com/">Sweden</option>
	</select>
</div>

这里的问题是当我们将鼠标悬停在目的地下拉列表中，下拉列表的长度显示高于列表项目时，我希望目标下拉列表仅限于项目长度，请帮助我如何执行此操作

Answer 1

将DropNew函数更改为

＆＃13;

＆＃13;

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

}

＆＃13;

＆＃13;

＆＃13;

并添加＆＃34;迈索尔＆＃34;选项进入＆＃34; iOperation＆＃34;

＆＃13;

＆＃13;

<option class="hidden" value="https://www.amazon.in/">Mysore</option>

＆＃13;

＆＃13;

＆＃13;