javascript - 在用户打开它之前动态地将 添加到 元素 转载 作者：行者123 更新时间：2023-11-30 06:34:46 24 4 全部， 我正在开发一个网络应用程序。其中一个关键屏幕包含一个相当大的表格 - 通常在 50-100 行之间。 在每一行，我有两个 <select>要素；每个包含 10-30 <option> 的任何地方元素。 如果我要包括所有 <option>每个 <select> 上的元素在每一行上，我最终可能会得到超过 6,000 个元素(100 行 x 2 个选择 x 30 个选项)。 因此，我的计划是将每个选择限制为单个选项(所选选项)。然后，当用户单击选择时，我会使用 JavaScript/jQuery 来填充选项。 然后，在用户关闭选择后，我将删除除所选选项之外的所有选项。 重要的是，我触发了在 focus 上添加选项的 JavaScript 函数事件。 在 Chrome 和 Firefox 中 - 这很好用。 我设置了一个 jsFiddle 来演示:http://jsfiddle.net/j2zfD/ 但是，在 IE 中 - 它不能正常工作。最初，当您单击选择时 - 而不是显示菜单 - 它只是聚焦在选择内。如果您再次单击选择，则会显示菜单。我猜测那是因为 IE 试图在 BEFORE 触发 focus 时显示菜单事件。 底线 - 这是 Not Acceptable ，因为您需要点击选择两次以显示选项菜单。 在 iOS 上的 Safari 中，它也有时不能正常工作。 (可能是因为在构建菜单和触发焦点事件之间存在竞争条件...) 我已经尝试将我的逻辑移动到 mousedown事件，但这似乎会导致更多问题，因为 mousedown 不仅会在您单击选择时触发，还会在您单击任何选项时触发。 我猜这种方法(在需要时向选择添加选项)已经成功实现了数千次；我只需要一些关于如何正确执行此操作的建议。 提前致谢! 最佳答案 试试这个: HTML <select class="sel"> <option value="a">Option A</option></select> jQuery jQuery(document).ready(function($){ var option={ "a":"option a", "b":"option b", "c":"option c" }; $('.sel').on('click',function(){ $('.sel').html(''); $.each(option,function(i,n){ $('.sel').append('<option value='+i+'>'+n+'</option>'); }); }); $('.sel').on('change',function(){ var selected_val=$(this).val(); var selected_option=$("option:selected",this).text(); $('.sel').html(''); $('.sel').append('<option value='+selected_val+'>'+selected_option+'</option>'); });}); 这是演示:http://jsfiddle.net/mHGQs/ 关于javascript - 在用户打开它之前动态地将 <options> 添加到 <select> 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15283064/ 24 4 0 文章推荐： javascript - 如何在没有 Fleegix.js 的情况下使用 timezone-js 加载时区文件？ 文章推荐： javascript - 淡出 Div 内容 - 空 Div 内容 - 淡入新内容 文章推荐： javascript - 用于用户提供坐标的通用 JavaScript 解析器 文章推荐： javascript - jQuery treeTable 插件抛出错误 "TypeError: $(...).treetable is not a function" javascript - 执行存在于输入值字段中的 javascript - JavaScript 我有一个 html 格式的表单: 我需要得到 JavaScript在value input 字段执行，但只能通过表单的 submit .原因是页面是一个模板所以我不控制它(不能有 javascript - JavaScript 代码片段正在破坏其他 JavaScript 我管理的论坛是托管软件，因此我无法访问源代码，我只能向页面添加 JavaScript 来实现我需要完成的任务。 我正在尝试用超链接替换所有页面上某些文本关键字的第一个实例。我还根据国家/地区代码对这些 javascript - JavaScript 如何使新页面包含更多 JavaScript？ 我正在使用 JS 打开新页面并将 HTML 代码写入其中，但是当我尝试使用 document.write() 在新页面中编写 JS 时功能不起作用。显然，一旦看到 ，主 JS 就会关闭。用于即将打开的 javascript - Javascript 引擎如何在浏览器中执行 Javascript？ 提问不是为了解决问题，提问是为了更好地理解系统 专家!我知道每当你将 javascript 代码输入 javascript 引擎时，它会立即由​​ javascript 引擎执行。由于没有看过Engi javascript - 如何将 JavaScript 变量从一个 JavaScript 文件传递​​到另一个 JavaScript 文件？ 我在一个文件夹中有两个 javascript 文件。我想将一个变量的 javascript 文件传递​​到另一个。我应该使用什么程序？ 最佳答案 window.postMessage用于跨文档消息。使 javascript - javascript 中的 javascript 输入问题 我有一个练习，我需要输入两个输入并检查它们是否都等于一个。 如果是 console.log 正则 console.log false 我试过这样的事情: function isPositive(fir javascript - 在加载其他 javascript 库的页面上嵌入 Javascript？ 我正在做一个Web应用程序，计划允许其他网站(客户端)在其页面上嵌入以下javascript: 我的网络应用程序位于 http://example.org 。 我不能假设客户端网站的页面有 JQue javascript - 从 Javascript 内部调用 Javascript 目前我正在使用三个外部 JS 文件。 我喜欢将所有三个 JS 文件合而为一。 尽一切可能。我创建 aio.js 并在 aio.js 中 src="https://code.jquery.com/ javascript - AngularJS/javascript javascript 对象的特殊排序顺序 我有例如像这样的数组: var myArray = []; var item1 = { start: '08:00', end: '09:30' } var item2 = { javascript - 在 Javascript 内部执行 Javascript？ 所以我正在制作一个 Chrome 扩展，它使用我制作的一些 TamperMonkey 脚本。我想要一个“主”javascript 文件，您可以在其中包含并执行其他脚本。我很擅长使用以下行将其他 jav javascript - 如何将变量从 javascript 移动到 javascript？ 我有 A、B html 和 A、B javascript 文件。 并且，如何将 A JavaScript 中使用的全局变量直接移动到 B JavaScript 中？ 示例 JavaScript) va javascript - 从 javascript 调用 javascript 我需要将以下整个代码放入名为 activate.js 的 JavaScript 中。你能告诉我怎么做吗？ var int = new int({ seconds: 30, mark javascript - 将变量值从一个 JavaScript 传递到另一个 JavaScript 我已经为我的 .net Web 应用程序创建了母版页 EXAMPLE1.Master。他们的 I 将值存储在 JavaScript 变量中。我想在另一个 JS 文件中检索该变量。 示例1.大师:- javascript - 有没有开源库可以在浏览器中使用 Javascript 来整理 Javascript？ 是否有任何库可以用来转换这样的代码: function () { var a = 1; } 像这样的代码: function () { var a = 1; } 在我的浏览器中。因为我在 Gi javascript - javascript 中的参数列表后缺少语法 javascript 错误 ) 我收到语法缺失 ) 错误 $(document).ready(function changeText() { var p = document.getElementById('bidp javascript - 第一个 JavaScript 完成后启动第二个 JavaScript 我正在制作进度条。它有一个标签。我想调整某个脚本完成的标签。在找到可能的解决方案的一些答案后，我想出了以下脚本。第一个启动并按预期工作。然而，第二个却没有。它出什么问题了？代码如下: HTML: javascript - 为什么外部 javascript 库会阻止我页面上的 javascript？ 这里有一个很简单的问题，我简单的头脑无法回答:为什么我在外部库中加载时，下面的匿名和onload函数没有运行？我错过了一些非常非常基本的东西。 Library.js 只有一行:console.log( javascript - 如何区分代码内 javascript 和客户端 javascript 我知道 javascript 是一种客户端语言，但如果实际代码中嵌入的 javascript 代码以某种方式与在控制台上运行的代码不同，我会尝试找到答案。让我用一个例子来解释它: 我想创建一个像 Mi javascript - 将 Javascript 内联到不显眼的 JavaScript？ 我如何将这个内联 javascript 更改为 Unobtrusive JavaScript？ 谢谢! 感谢您的回答，但它不起作用。我的代码是: PHP js文件 document.getElem javascript - 如何将 JavaScript 对象导出为 JavaScript？ 我正在寻找将简单的 JavaScript 对象“转储”到动态生成的 JavaScript 源代码中的最优雅的方法。 目的:假设我们有 node.js 服务器生成 HTML。我们在服务器端有一个对象x。 行者123 个人简介 我是一名优秀的程序员,十分优秀！ 作者热门文章 html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？ JMeter 在响应断言中使用 span 标签的问题 html - 在 :hover and :active? 上具有不同效果的 CSS 动画 html - 相对于居中的 html 内容固定的 CSS 重复背景？ 滴滴打车优惠券免费领取 全站热门文章 【事件分析】20250112-Usual赎回机制调整事件 为你的Blazor程序加入本地化多语言功能 AVL树的插入 在OERV也可以玩MC（上） Ellyn-Golang调用级覆盖率＆方法调用链插桩采集方案 .NETCore委托原理解析 keycloak~巧用client-scope实现token字段和userinfo接口的授权 React源码解析(1):JSX语法与react项目渲染过程 nginx简单实践：静态资源部署、URL重写【nginx实践系列之一】 DevOps企业级CI/CD实战——整合GitLab+Jenkins+Harbor+Docker实现代码全自动化流程管理 Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号 广告合作:1813099741@qq.com 6ren.com