我没有希望,但我会问以防万一.
我希望能够使用JavaScript在iPhone/iPad的移动Safari中打开一个选择元素.
广泛的Google/Stack Overflow搜索显示很多人希望能够在浏览器中执行此操作,但不支持(为什么不呢,我想知道?).已经提出了各种黑客攻击,从调用focus()select元素并更改其size属性以使更多option元素可见,或构造带有<div>和<ul>元素的完全模拟选择元素.但是,我想在iPad和iPhone中使用本机浏览器选择控件.
我想知道,也许有人可能知道专有的Apple WebKit方法来做到这一点.它会是这样的:
var myselect = document.getElementsByTagName("select")[0];
myselect.open(); // this method doesn't exist
Run Code Online (Sandbox Code Playgroud)
作为奖励,知道一个布尔属性也很方便,该属性说明select元素当前是否打开/活动(即不仅仅是元素是否具有焦点).我知道我可以通过跟踪点击和更改事件来解决这个问题,但是一个简单的属性会很有用.
妄想?
更新:
我还没有答案,但我发现模拟mousedown成功打开谷歌浏览器中的选择元素,但不是iPad或Firefox等等:
function simulateMouseEvent(eventName, element) {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent(eventName, true, true, window,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
element.dispatchEvent(evt);
}
simulateMouseEvent("mousedown", select);
Run Code Online (Sandbox Code Playgroud)
更新:
我已经在这里选择了一个相关但不同(并且同样没有答案!)的问题:在关闭HTML select元素时是否会触发一个DOM事件?
我有一个简单的<select>元素,其中包含以下几个<option>元素:
<select id="dollarAmount">
<option>select dollar amount</option>
<option>$5</option>
<option>$10</option>
<option>$15</option>
<option>$20</option>
</select>
Run Code Online (Sandbox Code Playgroud)
<select>只有当用户将鼠标悬停在页面上的另一个元素上时,才会显示此表单:
$("#parentDiv").mouseenter(function(){
$("#selectFormDiv").show(); //dollarAmount contained in this div
});
Run Code Online (Sandbox Code Playgroud)
在触发mouseleave事件时parentDiv,我确保表单模糊,以便选项不会保持展开状态.一旦模糊,我可以安全地隐藏包含,<div id="selectFormDiv">以便表格及其容器正确隐藏.
$("#parentDiv").mouseleave(function(){
$("#dollarAmount").blur();
$("#selectFormDiv").hide();
});
Run Code Online (Sandbox Code Playgroud)
我的问题是:这适用于IE8和Firefox 5.1,但不适用于Chrome 12.0或Safari 5.1.我已经检测到浏览器是否是一个webkit并使用不同的命令进行测试,它似乎blur()不会导致<select>表单崩溃(正确的术语?试图隐藏掉落的选项).上面的代码不会隐藏选项,如果他们在离开时扩展parentDiv.触发hide()表单上的事件会隐藏Chrome中的选项(在Opera中仍然没有运气),但当然也会导致整个表单隐藏:
$("#parentDiv").mouseleave(function(){
if($.browser.webkit) {
$("#dollarAmount").hide();
$("#selectFormDiv").hide();
}
else {
$("#dollarAmount").blur(); //blur only triggers for non webkits?
$("#selectFormDiv").hide();
}
});
Run Code Online (Sandbox Code Playgroud)
我试过几个其他事件/方法,包括触发document.mouseup时mouseleave触发blur().我试图使用focusout,change和click事件来折叠选择表单,但没有成功. …
具有以下简单的下拉菜单:
<select id="foo">
<option>bar</option>
</select>
Run Code Online (Sandbox Code Playgroud)
jQuery监听器初始化如下:
$("#foo").on("click", function() {
console.log("stuff");
});
Run Code Online (Sandbox Code Playgroud)
仅当用户通过选择选项或单击框外单击关闭下拉列表时才触发该事件。当他打开盒子时,有什么办法可以得到这个事件?
我想创建一个下拉列表,该列表应显示值而不是文本。
但是,当我单击下拉列表时,该选项应显示文本而不是值。
我在这里添加了一个示例,但是它没有按预期工作:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<select>
<option name="One" value="1">One</option>
<option name="Two" value="2">Two</option>
<option name="Three" value="3">Three</option>
<option name="Four" value="4">Four</option>
</select>
<script>
$(document).ready(function() {
$('select').click(function() {
$('select :selected').text($('select :selected').val());
});
});
</script>
</body>
</html>Run Code Online (Sandbox Code Playgroud)
这是示例的图片。
我想在select元素中按一个选项时触发功能.我认为.click()会更好,但事实是,它执行得太快了,以至于它不允许我从select中选择选项.相反,当我打开下拉列表时,它会获取第一个选项的值.有人可以建议我一个处理这个的方法吗?
HTML:
<select name="year2" id="year1" style="width:200px;">
<option value="none"> none </option>
<option value="2015"> 2015 </option>
<option value="2014"> 2014 </option>
<option value="2013"> 2013 </option>
</select>
Run Code Online (Sandbox Code Playgroud)
JavaScript的:
$( "#year1" ).click(function() {
var year=$("#year1").val();
var stream=$("#stream").val();
$.ajax({
url:"checkonserver.jsp",
Run Code Online (Sandbox Code Playgroud)