摘自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 = '' }"> ``` - `...