社群學習工具庫休閒

繁体中文

首頁 > web前端 > js教程 > javascript option onclick事件ie解决方案兼容ie,firefox_表单特效

javascript option onclick事件ie解决方案兼容ie,firefox_表单特效

WBOY

發布： 2016-05-16 18:38:48

原創

1425 人瀏覽過

<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){ 
//alert('aa'); 
var now=new Date(); 
var dt= (1900+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>

<select onclick="simOptionClick4IE()" style="width:235px; height:300px;margin-right:10px;border:1px solid #CFCDCD; background-color:#FFFFFF;font-family:'Arial'; font-size: 13px; color:#565553; font-style:normal; font-weight:normal; text-decoration:none"> 
 
<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>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

运行测试下即可。

相關標籤：

javascript onclick option

來源：php.cn

上一篇：event.srcElement 用法笔记e.target_javascript技巧下一篇：IE和Firefox下event事件杂谈_javascript技巧

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章

什麼是 NullPointerException，如何修復它？

2024-10-22 09:46:29
從新手到程式設計師：您的旅程從 C 基礎知識開始

2024-10-13 13:53:41
使用 PHP 解鎖 Web 開發：初學者指南

2024-10-12 12:15:51
揭秘 C：為新程式設計師提供一條清晰簡單的道路

2024-10-11 22:47:31
釋放您的編碼潛力：絕對初學者的 C 編程

2024-10-11 19:36:51
釋放你內心的程式設計師：C 絕對初學者

2024-10-11 15:50:41
使用 C 自動化您的生活：適合初學者的腳本和工具

2024-10-11 15:07:41
PHP 變得簡單：Web 開發的第一步

2024-10-11 14:21:21
使用 Python 建立任何東西：釋放創造力的初學者指南

2024-10-11 12:59:11
編碼的關鍵：為初學者釋放 Python 的力量

2024-10-11 12:17:31

最新問題

僅 CSS 方法可在單擊時動態修改圖片 src，無需使用 JavaScript 我需要僅使用css更改滑鼠單擊時圖像的src喜歡img:active{}

來自於 2024-04-06 19:25:49

0

1

505

放大 d3.js 時散佈圖點不會保持值這是我第一次使用d3.js，所以請耐心等待。我在vue.js檔案中將其作為純JavaScript實作。我正在嘗試製作具有縮放功能的散點圖。到目前為止，我幾乎一切正常，但當我縮放時，...

來自於 2024-04-06 18:16:26

0

1

403

供應商特定偽元素上的 JavaScript 懸停事件我有以下htmlinput標籤。 $("input[type='range']::-webkit-slider-thumb").on('hover',funct...

來自於 2024-04-06 15:35:24

0

1

274

使用 Javascript / Jquery 提交表單且不含按鈕我試圖透過呼叫JavaScript函數並使用JQUERY/PHP執行表單來提交沒有按鈕的表單。我希望表單在後端靜默執行，而無需重新載入頁面。不幸的是，它不斷傳回JavaScript...

來自於 2024-04-06 14:54:03

0

2

421

使用「折疊顯示器」類別自訂 Bootstrap 手風琴標題的外觀我想設定具有類別collapseshow的面板的卡片標題樣式。在此範例中，它是第一個面板。我嘗試使用CSS來使用.accordion.card.card-headerbutton....

來自於 2024-04-06 12:53:11

0

1

376

相關專題

更多>

熱門推薦

熱門教學

更多>

相關教學

熱門推薦

最新課程

最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)

1422817
php入門教程之一週學會PHP

4267917
JAVA 初級入門影片教學

2532257
小甲魚零基礎入門學習Python影片教學

507178
PHP 零基礎入門教學

862286

最新下載

更多>

網站特效

網站源碼

網站素材

前端模板