`
lxz8157
  • 浏览: 35879 次
  • 来自: ...
最近访客 更多访客>>
社区版块
存档分类
最新评论

让select支持onClick

阅读更多
摘自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下拉框(支持输入模糊查询)

    【JS Select下拉框(支持输入模糊查询)】 在网页开发中,`&lt;select&gt;`元素通常用于创建下拉框,但原生的HTML `&lt;select&gt;`元素并不支持输入模糊查询功能。为了实现这一功能,我们需要利用JavaScript来扩展和增强下拉框的...

    input触发弹出层,实现select 效果

    1. 创建一个`input`元素,设置适当的ID和事件监听器,如`onclick`,用于触发弹出层的显示。 2. 创建一个`div`元素,包含所有`select`的选项,初始状态为隐藏。每个选项可以是`li`列表项或者其他元素,通过CSS进行...

    javascript option onclick事件ie解决方案 兼容ie,firefox

    在使用上述代码时,还需要确保option元素支持onclick属性的赋值,这通常意味着需要为每个option元素单独设置onclick属性或在JavaScript中动态绑定。以下是在HTML中直接为option元素设置onclick事件的示例: ```html...

    HTML select option基础理解及使用

    此外,`&lt;option&gt;`还支持一些方法: - `add(newOption)`:在`&lt;select&gt;`的末尾添加一个新的`&lt;option&gt;`。 - `remove(index)`:根据索引删除一个`&lt;option&gt;`。 - `text`和`value`也可以作为方法使用,来修改`&lt;option&gt;`的...

    javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)

    首先,让我们看看JavaScript代码如何获取一个select元素当前选中的值。通过使用`document.getElementById`方法,我们可以选取具有特定id的select元素。然后,我们通过访问这个元素的`options`属性,该属性会返回一个...

    Select-Menu-React:React的自定义选择菜单组件

    3. **事件处理**:React通过JSX语法支持原生DOM事件,比如`onClick`、`onMouseEnter`等。`Select-Menu-React`中的菜单项可能绑定了这些事件,以便在用户交互时更新组件的状态或触发其他操作。 4. **条件渲染**:...

    JSP页面音乐

    `&lt;source&gt;`标签用于指定音频文件的来源和类型,多个`&lt;source&gt;`可以为不同格式的音频提供支持。最后的文本是对于不支持`&lt;audio&gt;`标签的浏览器的备选内容。 **二、JSP与音乐** JSP页面中可以嵌入HTML代码,因此我们...

    react-react实现的搜索框

    让我们深入探讨如何在React中创建一个功能完备的搜索框。 1. **组件化**:React推崇的是组件化的开发模式,每个UI元素都可以被看作是一个独立的组件。对于搜索框,我们可以创建一个名为`SearchBox`的组件,包含...

    (完整word版)HTML表单元素覆盖样式问题及其补救.docx

    &lt;button onclick="toggleSelectVisibility()"&gt;Toggle Select Visibility &lt;select id="selectId" style="z-index: 99;"&gt; &lt;!-- Select options here... --&gt; &lt;/select&gt; &lt;!-- ... --&gt; &lt;div id="subMenus" onclick=...

    layui+ztree下拉树,支持单选和多选

    onClick: function (event, treeId, treeNode) { // 单击节点事件 // 这里处理选中节点后的逻辑,如更新下拉框值,关闭下拉框等 } } }; var zNodes = [ { name: "节点1", children: [{ name: "子节点1" }, { ...

    javascript各浏览器中option元素的表现差异

    对于不支持直接在`&lt;option&gt;`元素上绑定事件的浏览器,可以将事件监听器添加到`&lt;select&gt;`元素上,并通过判断`event.target`或`event.srcElement`来确定触发事件的是哪个`&lt;option&gt;`。同时,如果需要在IE6中实现`...

    ajax控件支持

    &lt;select name="select1" id="select1" onfocus="demo(this.id);" onclick="this.size='1';" style="width:45px;position: absolute; top: -10px; border: 1px solid #333;"&gt; ...

    easyui combbox 显示默认值

    2. **事件处理**:如果需要在用户交互时更新默认值,如点击按钮或表单提交,可以监听相应的事件,如`onSelect`、`onClick`等。 3. **兼容性**:确认使用的EasyUI版本支持设置默认值的方法,不同版本可能存在差异。 ...

    Layui省市三级联动.rar

    其设计简洁、易用,兼容性良好,支持响应式布局。Layui的核心理念是模块化,这使得开发者可以按需引入所需模块,减少不必要的资源加载,提高页面性能。 jQuery则是一款广泛使用的JavaScript库,简化了DOM操作、事件...

    使用css禁用input、checkbox、select等html控件实现disable效果

    虽然大部分现代浏览器都支持上述CSS属性,但在生产环境中仍需进行充分的测试。同时,在设计用户界面时,确保禁用状态的控件清晰可辨,以避免给用户带来困惑。 以上便是使用CSS实现input、checkbox、select等HTML...

    分级选中的CheckBox复选框

    - 父级CheckBox的`onClick`事件触发`selectAll`函数,参数分别为当前CheckBox对象与层级编号。 - 子级CheckBox的`onClick`事件触发`gray1`函数,参数分别为当前CheckBox对象与其对应的父级CheckBox对象。 2. **...

    可编辑的下拉框(JavaScript)

    3. **多语言支持**:根据用户设定的语言,动态改变下拉框的提示和选项。 4. **无障碍性**:确保组件对辅助技术友好,如使用ARIA属性来改善屏幕阅读器的体验。 5. **响应式设计**:适应不同设备和屏幕尺寸,确保在...

    用原生JS实现简单的多选框功能

    在网页开发中,多选框(Checkbox)是一种常见的表单元素,用于让用户选择多个选项。在本示例中,我们将探讨如何使用原生JavaScript来实现一个简单的多选框功能,包括全选和反选所有子选项的功能。首先,让我们解析...

    Textbox自动全选

    默认文本" onMouseOver="this.focus()" onblur="if (this.value == '') { this.value = this.defaultValue }" onFocus="this.select()" onClick="if (this.value == '默认文本') { this.value = '' }"&gt; ``` - `...

Global site tag (gtag.js) - Google Analytics