是否可以使用JavaScript打开HTML选项以显示其选项列表?
如何以编程方式告诉HTML select下拉(例如,由于鼠标悬停)?
对于HTML中的下拉列表:
<select id="countries">
<option value="1">Country</option>
</select>
Run Code Online (Sandbox Code Playgroud)
我想打开列表(与左键单击相同).这可能是使用JavaScript(或更具体的jQuery)吗?
我有一个选择元素如下.我想打开它而无需用户点击它.
<select id="selId" class="pos_fixed">
<option value="volvo">Option1</option>
<option value="saab">Option2</option>
<option value="mercedes">Option3</option>
<option value="audi">Option4</option>
</select>
Run Code Online (Sandbox Code Playgroud)
如果可能使用jquery或javascript,请告诉我
我的菜单中有一个(隐藏的)html select对象,该对象附加到菜单按钮链接,因此单击该链接将显示列表,以便您可以从中进行选择。
当您单击按钮时,它将调用一些javascript以显示<select>。单击远离<select>隐藏即可隐藏列表。我真正想要的是使<select>外观完全展开,就像您单击了“向下”箭头一样,但是我无法正常工作。我尝试了许多不同的方法,但没有取得任何进展。我目前正在做的是这样的:
<li>
<a href="javascript:showlist();"><img src="/images/icons/add.png"/>Add favourite</a>
<select id="list" style="display:none; onblur="javascript:cancellist()">
</select>
</li>
// in code
function showlist() {
//using prototype not jQuery
$('list').show(); // shows the select list
$('list').focus(); // sets focus so that when you click away it calles onblur()
}
Run Code Online (Sandbox Code Playgroud)
$('list').click()。onfocus="this.click()"
但在两种情况下未被捕获的TypeError:对象#没有方法'click'
这是链接文本所特有的,它表示支持标准功能。
我尝试设置.size = .length哪个有效,但外观却不一样(如单击以打开该元素时,它会漂浮在页面的其余部分上。)
有没有人有什么建议?
我想在Android设备的浏览器上自动打开一个组合框.
我有以下代码:
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="jquery-1.8.0.min.js" type="text/javascript"></script>
<title>Combobox</title>
</head>
<body>
<div id="combobox">
<select id="select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<script>
$(document).ready(function() {
document.getElementById('select').size=3;
});
</script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
这适用于桌面浏览器(参见屏幕截图1),但遗憾的是,在Android设备上没有使用浏览器(参见屏幕截图2),只有在触摸组合框后,才会出现以下选项:
我希望它们在打开页面后立即出现(见截图3)
,如果可能的话只显示3个选项(滚动后的其他选项):
我怎样才能做到这一点?
编辑1:同时我发现了一个类似的问题在这里,但它似乎还没有解决方案...
编辑2:我现在找到了一个解决方法与jQuery Mobile的和列表视图,请参阅下面回答,但我仍然在等待其他(更好)的想法......
有人可以解释一下粘贴的代码有什么问题吗?<a>它会在悬停时显示警报,但不会像我预期的那样执行单击事件,并且单击对标签或标签都不起作用<select>。我的目的是通过触发点击事件来展开悬停时的select元素
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</head>
<body>
<a id="linkElement" href="www.google.co.uk">click</a>
<select name="cars" id="selectElemet">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<script>
$(document).ready(function () {
$("#selectElement").mouseover(function () {
$("#selectElement").trigger("click");
});
$("#linkElement").mouseover(function () {
alert('here');
$("#linkElement").trigger("click");
});
});
</script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)