摘自fins的,留以备用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>select-option onclick </title>
<script type="text/javascript" >
function simOptionClick4IE(){
var evt=window.event ;
var selectObj=evt?evt.srcElement:null;
// IE Only
if (evt && selectObj && evt.offsetY && evt.button!=2
&& (evt.offsetY > selectObj.offsetHeight || evt.offsetY<0 ) ) {
// 记录原先的选中项
var oldIdx = selectObj.selectedIndex;
setTimeout(function(){
var option=selectObj.options[selectObj.selectedIndex];
// 此时可以通过判断 oldIdx 是否等于 selectObj.selectedIndex
// 来判断用户是不是点击了同一个选项,进而做不同的处理.
showOptionValue(option)
}, 60);
}
}
function showOptionValue(opt,msg){
var now=new Date();
var dt= (now.getYear())+'-'+(now.getMonth()+1)+'-'+now.getDate()+
' '+now.getHours()+':'+now.getHours()+':'+now.getSeconds()+'.'+now.getMilliseconds();
var resultZone=document.getElementById('reslut');
resultZone.style.margin="10px";
resultZone.innerHTML=dt +" 时,点击了: " + (opt.text + ' = '+opt.value);
}
</script>
</head>
<body>
<select onclick="simOptionClick4IE()" >
<!-- 下面的 onclick="showOptionValue( this )" 是为 ff 和 opera而准备 -->
<option value="1" onclick="showOptionValue( this )" >aaaaa</option>
<option value="2" onclick="showOptionValue( this )" >bbbbb</option>
<option value="3" onclick="showOptionValue( this )" >ccccc</option>
</select>
<div id="reslut" ></div>
</body>
</html>
分享到:
相关推荐
【JS Select下拉框(支持输入模糊查询)】 在网页开发中,`<select>`元素通常用于创建下拉框,但原生的HTML `<select>`元素并不支持输入模糊查询功能。为了实现这一功能,我们需要利用JavaScript来扩展和增强下拉框的...
1. 创建一个`input`元素,设置适当的ID和事件监听器,如`onclick`,用于触发弹出层的显示。 2. 创建一个`div`元素,包含所有`select`的选项,初始状态为隐藏。每个选项可以是`li`列表项或者其他元素,通过CSS进行...
在使用上述代码时,还需要确保option元素支持onclick属性的赋值,这通常意味着需要为每个option元素单独设置onclick属性或在JavaScript中动态绑定。以下是在HTML中直接为option元素设置onclick事件的示例: ```html...
此外,`<option>`还支持一些方法: - `add(newOption)`:在`<select>`的末尾添加一个新的`<option>`。 - `remove(index)`:根据索引删除一个`<option>`。 - `text`和`value`也可以作为方法使用,来修改`<option>`的...
首先,让我们看看JavaScript代码如何获取一个select元素当前选中的值。通过使用`document.getElementById`方法,我们可以选取具有特定id的select元素。然后,我们通过访问这个元素的`options`属性,该属性会返回一个...
3. **事件处理**:React通过JSX语法支持原生DOM事件,比如`onClick`、`onMouseEnter`等。`Select-Menu-React`中的菜单项可能绑定了这些事件,以便在用户交互时更新组件的状态或触发其他操作。 4. **条件渲染**:...
`<source>`标签用于指定音频文件的来源和类型,多个`<source>`可以为不同格式的音频提供支持。最后的文本是对于不支持`<audio>`标签的浏览器的备选内容。 **二、JSP与音乐** JSP页面中可以嵌入HTML代码,因此我们...
让我们深入探讨如何在React中创建一个功能完备的搜索框。 1. **组件化**:React推崇的是组件化的开发模式,每个UI元素都可以被看作是一个独立的组件。对于搜索框,我们可以创建一个名为`SearchBox`的组件,包含...
<button onclick="toggleSelectVisibility()">Toggle Select Visibility <select id="selectId" style="z-index: 99;"> <!-- Select options here... --> </select> <!-- ... --> <div id="subMenus" onclick=...
onClick: function (event, treeId, treeNode) { // 单击节点事件 // 这里处理选中节点后的逻辑,如更新下拉框值,关闭下拉框等 } } }; var zNodes = [ { name: "节点1", children: [{ name: "子节点1" }, { ...
对于不支持直接在`<option>`元素上绑定事件的浏览器,可以将事件监听器添加到`<select>`元素上,并通过判断`event.target`或`event.srcElement`来确定触发事件的是哪个`<option>`。同时,如果需要在IE6中实现`...
<select name="select1" id="select1" onfocus="demo(this.id);" onclick="this.size='1';" style="width:45px;position: absolute; top: -10px; border: 1px solid #333;"> ...
2. **事件处理**:如果需要在用户交互时更新默认值,如点击按钮或表单提交,可以监听相应的事件,如`onSelect`、`onClick`等。 3. **兼容性**:确认使用的EasyUI版本支持设置默认值的方法,不同版本可能存在差异。 ...
其设计简洁、易用,兼容性良好,支持响应式布局。Layui的核心理念是模块化,这使得开发者可以按需引入所需模块,减少不必要的资源加载,提高页面性能。 jQuery则是一款广泛使用的JavaScript库,简化了DOM操作、事件...
虽然大部分现代浏览器都支持上述CSS属性,但在生产环境中仍需进行充分的测试。同时,在设计用户界面时,确保禁用状态的控件清晰可辨,以避免给用户带来困惑。 以上便是使用CSS实现input、checkbox、select等HTML...
- 父级CheckBox的`onClick`事件触发`selectAll`函数,参数分别为当前CheckBox对象与层级编号。 - 子级CheckBox的`onClick`事件触发`gray1`函数,参数分别为当前CheckBox对象与其对应的父级CheckBox对象。 2. **...
3. **多语言支持**:根据用户设定的语言,动态改变下拉框的提示和选项。 4. **无障碍性**:确保组件对辅助技术友好,如使用ARIA属性来改善屏幕阅读器的体验。 5. **响应式设计**:适应不同设备和屏幕尺寸,确保在...
在网页开发中,多选框(Checkbox)是一种常见的表单元素,用于让用户选择多个选项。在本示例中,我们将探讨如何使用原生JavaScript来实现一个简单的多选框功能,包括全选和反选所有子选项的功能。首先,让我们解析...
默认文本" onMouseOver="this.focus()" onblur="if (this.value == '') { this.value = this.defaultValue }" onFocus="this.select()" onClick="if (this.value == '默认文本') { this.value = '' }"> ``` - `...