chrome 不能实现option的onclick事件

最新推荐文章于 2021-12-22 17:31:58 发布
转载 最新推荐文章于 2021-12-22 17:31:58 发布 · 1.3k 阅读 · 0

本文介绍了一种利用HTML的onchange事件来响应下拉菜单选择变化的方法，并通过一个具体的示例展示了如何使用JavaScript来实现清除历史记录的功能。当用户选择'ClearHistory'选项时，页面会提交表单以执行相应的操作。

改用onchange事件

<select name="history" id="history" onchange="historyChanged(this);">
 <option value="history1">history 1</option>
 <option value="history2">history 2</option>
 <option value="clearhistory">Clear History</option>
</select>


function historyChanged() {

    var historySelectList = $('select#history');
    var selectedValue = $('option:selected', historySelectList).val();


    alert(selectedValue);


    if (selectedValue == 'clearHistory') {
        historySelectList.form.submit();
    }
}
[JavaScript] 第三章 Chrome 浏览器中调试JavaScript
Java 技术专栏，从入门到精通，熟悉企业级开发
07-17 2491
在Chrome浏览器中，可以使用开发者工具的调试功能来调试和执行JavaScript代码。以下是一些常用的调试技巧：设置断点、单步执行、监视变量、控制台调试、异常处理。这只是一些Chrome浏览器调试功能的例子。要打开开发者工具并访问调试功能，你可以按下Ctrl + Shift + J（Windows / Linux）或Command + Option + J（Mac），或者在浏览器菜单中选择"更多工具" > “开发者工具”，或者在页面上点击鼠标右键选中【检查】。
遇到问题---谷歌浏览器select返回后选中无效
直到世界的尽头
01-08 4810
有select用法如下: ${bean.name} 首次进入页面 选中没问题，但是发现 在谷歌浏览器或者 iPhone中 点击返回键 选中失效。 解决方法: 在进页面时  把select选中的值赋给  select    -------------需要引入jQuery的js，然后用如下代码: $(function(){
在谷歌浏览器下拉框中的onclick事件失效无响应解决方案
徊忆羽菲
12-22 1735
在谷歌浏览器下拉框中的onclick事件失效无响应解决方案源代码解决方案 源代码 <select name="page" size="1" > <option onclick="qipa250(1)" selected="selected">第1页</option> <option onclick="qipa250(2)">第2页</option> </select> 这段代码在IE和火狐浏览下可以使用，在谷歌浏览器里面可以显示下来框
谷歌浏览器不兼容select的option里onclick事件的解决方案
08-26 7452
代码里在option 里加了onclick事件属性，平时多在firefox浏览器下开发，测试时发现以谷歌为内核的浏览器onclick事件无作用，查了下资料，在select里面用onchange就好了，如下：<select onchange="return selected(this.options[this.selectedIndex].value)"></select>
onClick在Chrome下无效
wbr306408943的博客
03-19 7203
相信大家对内联的js事件都不陌生。我们先来看看以下例子： nClick="func1();">1; 一眼过去，点击下拉框的选项“1”，就会执行func1；的确，打开360浏览器，以上思路的确行的通，但是在Chrome下却无效。究其原因，我们要实现的是在select元素中进行选择，选择后执行函数func1；上面的代码用了onClick实现选择功能，但是对于select元素来说真正的选择事件是cha
js - select option firefox和chrome 对onclick的支持 使用on
Beluga_白鲸
07-14 2254
select option firefox和chrome 对onclick的支持 firefox支持select和option增加onclick事件，举例： 请选择专业层次 本科 专科
给select下拉列表的option添加onclick（点击）事件(兼容IE8, Chrome)
热门推荐
Kinber_XD的博客
05-16 1万+
1.参考资料:☞☞点我跳转 问题描述: select的onchange并不能满足所有的业务需求!!! 比如当我们第一次点击下拉列表的某一个option的时候会触发onchange, 但是当我们点击第二次再次点击相同的option的时候, (注意: 此时浏览器认为第一次选中的option与第二次选中的option一致, 不会再次触发onchange) 但是我们需要的是每次点击或选择opti...
javascript各浏览器中option元素的表现差异
12-04
这意味着在这些版本的IE中，你不能直接通过`<option>`元素的事件处理器来执行某些操作。 - 相反，Firefox、Safari、Chrome 和 Opera 支持在`<option>`元素上绑定事件。例如，你可以为`<option>`元素设置`onclick`...
python+selenium+chrome批量文件下载并自动创建文件夹实例
09-16
在自动化处理大量文件的场景下，如批量下载指定网站上的文件，并将其分类存储到不同的文件夹中，可以利用Python结合Selenium与Chrome WebDriver实现这一需求。本文将详细介绍如何使用Python+selenium+chrome来实现...
javascript下拉框选项单击事件的例子分享
10-24
鉴于此，文章建议我们不应当直接在`<option>`元素上绑定`click`事件，而是应该使用更通用的`change`事件来替代，因为`change`事件在所有主流浏览器上均有良好的支持。使用`onchange`事件的方法如下： ```javascript...
在Chrome插件中实现定时任务功能
# 1. 简介 ## 1.1 什么是Chrome插件？ 在谷歌Chrome浏览器中，Chrome插件（Chrome Extension）是一种用于扩展浏览器功能的...本文将介绍如何在Chrome插件中实现定时任务功能，通过定时任务功能，我们可以为用户提供更
<select>下拉菜单click点击事件在谷歌浏览器无法执行问题
Richie
01-30 8201
几天前，写一个异步post提交的时候，在select标签中加一个click点击事件，点击下拉菜单的时候，无法执行点击事件。 代码$('.form-control').find().click(function(){ var id = $(this).val(); $.post("{:U('Index/getfilm')}",{mode
jQuery 点击option 更改select 的name属性(解决谷歌Chrome onclick事件失效问题)
zzzmgr的博客
09-06 2555
需求:点击不同的选项向后台提交的name也随之改变(1,2选项 name="state" ;3选项name="state2") 一个简单的select标签 &lt;select style="width: 165px;" name="state" id="state"&gt; &lt;option value=""&gt;-请选择-&lt;
谷歌浏览器下拉框中的onclick事件无响应
听风暖的博客
03-13 9437
有下拉跳转框如下所示： select name="page" size="1" > option onclick="refurbish(1)" selected="selected">第1页option> option onclick="refurbish(2)">第2页option> select> refurbish()函数是一个javascript函数，可以根据传入的数字来获取到对应
Chrome插件开发之manifest.json
weixin_34260991的博客
07-09 511
广而告之： Chrome插件之一键保存网页为PDF1.1发布 http://www.cnblogs.com/bdstjk/p/3179543.html 最近做“一键保存网页为PDF”过程中，对Chrome插件的开发也有些心得，在这里分享给大家。 在这里我将我用我插件作为例子给大家讲解，虽然我这篇文章是讲manifest.json...
chrome.tabs.sendMessage 携带参数
最新发布
05-17
### 如何通过 `chrome.tabs.sendMessage` 传递参数 在 Chrome 插件开发中，`chrome.tabs.sendMessage` 是一种用于向特定标签页发送消息的方法。该方法支持携带自定义参数作为消息的一部分传递给目标页面中的内容脚本（content script）。以下是详细的说明以及示例代码。 #### 方法签名 `chrome.tabs.sendMessage(tabId, message, options?, responseCallback?)` - **tabId**: 要发送消息的目标标签页 ID。 - **message**: 需要传递的消息对象，可以是一个 JSON 可序列化的结构化数据[^1]。 - **options** *(可选)*: 配置选项，默认为空。 - **responseCallback** *(可选)*: 当接收到响应时调用的回调函数。 #### 示例代码 以下是一个完整的例子，展示如何从弹出窗口（popup）向内容脚本（content script）发送带有参数的消息： ##### Popup.js (发送方) ```javascript document.getElementById("plugin_search_but").onclick = async function () { try { // 查询当前活动的标签页 const [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); if (tab && tab.id) { // 定义需要传递的参数 const messagePayload = { action: "fromPopup2Content", params: { searchQuery: "example query", // 自定义参数 filterOptions: ["option1", "option2"] // 更多参数 } }; // 使用 sendMessage 发送消息到指定标签页 chrome.tabs.sendMessage( tab.id, messagePayload, null, (response) => { if (chrome.runtime.lastError) { console.error(chrome.runtime.lastError.message); } else { console.log("Response from content script:", response); } } ); } } catch (error) { console.error("An error occurred while sending the message:", error); } }; ``` ##### Content Script (接收方) ```javascript // 添加消息监听器 chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { console.log("Received message from popup:", message); // 处理传入的参数 if (message.action === "fromPopup2Content") { const { searchQuery, filterOptions } = message.params; console.log("Search Query:", searchQuery); // 输出 example query console.log("Filter Options:", filterOptions); // 输出 ['option1', 'option2'] // 返回响应 sendResponse({ status: "success", data: "Data processed successfully!" }); } // 让异步操作能够返回值 return true; }); ``` #### 关键点解析 1. **消息格式** 消息通常被设计成一个对象形式，其中包含动作字段 (`action`) 和参数字段 (`params`)。这种模式有助于清晰地区分不同的功能逻辑。 2. **错误处理** 如果目标标签页未加载对应的内容脚本或者无法正常运行，则会触发 `chrome.runtime.lastError` 错误事件。因此，在实际应用中应始终检查此属性并妥善处理异常情况。 3. **跨上下文通信** 此机制允许不同类型的组件之间建立有效的沟通渠道，比如背景页面(background page)，弹窗(popup window)与网页内部嵌入式脚本(content scripts)[^4]。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值