从 ul li jquery 获取所选项目

2023-11-24

您好,我正在动态地在 ul - li HTML 标记中填充一个列表。我所需要的只是获取相应 ul 的选定 li 的值。我尝试了所有可能的 jquery 方法,但仍然未定义。我将 ul - li 填充为:

jQuery.get(url, function(data) {        
        for(i=0;i<data.length;i++){
            //console.log(data[i])  //"+data[i]+"
            msg = "<li> <a href=#>"+data[i]+"</a></li>";
            document.querySelector('#option1').innerHTML +=  msg;
        }           
    });

HTML 部分如下:

<body>  
 <div class="wrap">    
 <div class="content">
 <div class="cate-map">
    <ul id="option1" onclick="doSelection()">       
    </ul>       
  </div>
  </div>    
  <div class="content2">
  <div class="cate-map">
    <ul id="option2">       
    </ul>       
  </div>
 </div>
<div class="clear"></div>    
<div class="content3">  <textarea id="content4"></textarea>    
</div>    
</div>
</body>

onclick方法如下:

function doSelection(){
    var id = $('#option1 li.selected').attr('value');
    alert(id);      
}

问题是我的 id 值“未定义”。

UPDATE

正如大家所建议的,我将代码更改为:

将 ul 填充为:

jQuery.get(url, function(data) {
        for(i=0;i<data.length;i++){
            msg = "<li data-input="+data[i]+" class='selected'> <a href=#>"+data[i]+"</a></li>";
            document.querySelector('#option1').innerHTML +=  msg;
        }

    });

HTML ul 为:

<div class="cate-map">
    <ul id="option1"  onclick="doSelection()">

    </ul>

    </div>

Onclick 函数为:

function doSelection(){
    alert($('#option1 li.selected').attr('data-input'));

}

现在我得到一个警报值,但我总是得到第一个元素作为警报。无论我单击哪个元素,仍然总是获取列表的第一个元素。请帮忙。


你需要添加selected类到任何li元素。 一探究竟:

msg = "<li class="selected"> <a href=#>"+data[i]+"</a></li>";

并获取锚标签的内容:

function doSelection(){
    var id = $('ul#option1 > li.selected a').text();
    alert(id);

}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

从 ul li jquery 获取所选项目 的相关文章

  • jquery window.open 在 ajax 成功中被阻止

    尝试在我的 ajax 成功调用中打开一个新的浏览器窗口 但是 它被阻止为弹出窗口 我做了一些搜索 发现用户事件需要绑定到 window open 才能避免这种情况发生 我还找到了这个解决方案 您可以在 ajax 之前打开一个空白窗口 然后在
  • HTML2canvas 和 Canvas2image,下载的屏幕截图不显示我的 HTML 图像

    我一直在开发一个 HTML 页面 我想将其转换为图像 我一直在使用 html2canvas 和 canvas2image 脚本并采用此代码http jsfiddle net 8ypxW 3 http jsfiddle net 8ypxW 3
  • 通过 node-http-proxy 保留基于 cookie 的会话

    我有一个简单的基于 Express 的 Node js Web 服务器 用于开发 JavaScript 应用程序 我将服务器设置为使用 node http proxy 来代理应用程序向在不同域和端口上运行的 Jetty 服务器发出的 API
  • JavaScript 中数组的 HTML 数据列表值

    我有一个简单的程序 它必须从服务器上的文本文件中获取值 然后将数据列表填充为输入文本字段中的选择 为此 我想要采取的第一步是我想知道如何动态地将 JavaScript 数组用作数据列表选项 我的代码是
  • 如果链接包含特定文本,jQuery 将类添加到 href

    我的网站上的列表中有一些动态填充的链接 这些链接链接到文件 是否可以使用 jQuery 查看文件名是否以 pdf 结尾 并在 href 或类似的链接文本以 mp3 结尾时添加一个类 例如 我的列表中有以下链接 文件1 pdf 歌曲1 mp3
  • Google Chrome 106 可拖动导致元素消失

    使用拖放元素时 绝对定位元素中包含的大多数其他元素都会从屏幕上消失 如果我调整窗口大小 这些元素会出现 但在开始拖动时会再次消失 我在最新版本的 Google Chrome 106 和 Beta 版本 107 0 5304 18 以及现在的
  • 如何流式传输 OpenAI 的完成 API?

    我想流式传输结果通过 OpenAI 的 API 完成 https beta openai com docs api reference completions 该文档提到使用服务器发送的事件 https developer mozilla
  • 未捕获的错误:找不到模块“jquery”

    我在用Electron https github com atom electron制作桌面应用程序 在我的应用程序中 我正在加载一个外部站点 Atom 应用程序之外 可以说http mydummysite index html http
  • 如何在 Angular 中从父组件访问子组件?

    I have mat paginator在子组件a中 如下所示 子组件 html
  • JQuery 验证在 IE8 中不起作用

    我使用 JQuery 验证脚本来验证 HTML 表单 这在 Firefox 中完美运行 但在 IE8 中不起作用 我认为冒号 或分号 有问题 但我无法抓住它 jQuery validator addMethod selectNone fun
  • Twitter 嵌入时间轴小部件

    我继续下载http platform twitter com widgets js http platform twitter com widgets js And the http platform twitter com embed t
  • 如何通过jquery更改元素的类名

    div class bestAnswerControl div class IsBestAnswer div div 我想补充一下 bestanswer some attribute 我想更换class IsBestAnswer div 到
  • JSTL 在循环中每 5 个字段集创建一个新行

    您好 我目前正在迭代并在表中显示字段集列表 为了让布局变得更得体一些 我想在每次循环到达第五个字段集时创建一个新行 谢谢 JSP div class det table class det tr td td tr table div
  • 查询为空 Node Js Sequelize

    我正在尝试更新 Node js 应用程序中的数据 我和邮递员测试过 我的开发步骤是 从数据库 MySQL 获取ID为10的数据进行更新 gt gt 未处理的拒绝SequelizeDatabaseError 查询为空 我认识到 我使用了错误的
  • Select2 下拉列表动态添加、删除和刷新项目

    这让我发疯 为什么 Select2 不能在其页面上实现清晰的方法或示例如何在 Select2 上进行简单的 CRUD 操作 我有一个 select2 从 ajax 调用获取数据
  • JavaScript 代码在不使用 ActiveX 的情况下截取网站屏幕截图

    我有一个用户与之交互的 JavaScript 应用程序 我需要保存当前界面的外观 裁剪出我需要的部分 或者通过指定div只拍摄我需要的部分 然后发送回服务器 显然任何外部服务都无法做到这一点 我需要一个 JavaScript 或Flash
  • 数据表日期范围过滤器

    如何添加日期范围过滤器 like From To 我开始进行常规搜索和分页等工作 但我不知道如何制作日期范围过滤器 我正在使用数据表 1 10 11 版本 My code var oTable function callFilesTable
  • 需要有关 React Js 的帮助

    我是 React Js 新手 我的代码无法正常工作 请看下面 这是我的脚本文件Main jsx 该文件由 React 编译 输出放置在 dist 文件夹下的 main js 文件中 var react require react react
  • 在 Javascript 中减少/分组数组

    基于this https stackoverflow com a 40774906 3254598例如 我想以稍微不同的方式按对象进行分组 结果应该如下 key audi items make audi model r8 year 2012
  • 如何在 gulp.src 中使用基本正则表达式?

    我正在尝试选择两个文件gulp src highcharts js and highcharts src js 当然 我知道我可以使用数组表达式显式添加这两个表达式 但出于学习目的 我尝试为它们编写一个表达式 我读过可以使用简单的正则表达式

随机推荐

  • 检查 [] 运算符

    Python中如何检查对象是否支持 操作 我想到了类似以下的事情 if supports obj print Supports 您不 检查支持 你只需使用它 try a obj whatever except TypeError whate
  • JAX-RS 接受图像作为输入

    相当长一段时间以来 我一直在开发 JAX RS Web 服务来满足我的开发需求 到目前为止我编写的所有方法都接受 java 字符串或原始类型作为输入 这种方法的一个例子 POST Path MyMethod Produces MediaTy
  • C++项目中ffmpeg的CMake配置

    我已经使用 Homebrew 安装了 ffmpeg 版本 4 并且尝试在 C 项目中使用各种 ffmpeg 库 但在链接过程中遇到多个错误 Undefined symbols for architecture x86 64 av free
  • 浏览器选项卡和窗口之间的区别

    在 Web 浏览器中 每个窗口都有自己的 JavaScript 环境 以及自己的 JavaScript 环境 全局对象 但看起来在同一窗口中打开一个新选项卡也会创建一个不同的全局对象 这是真的吗 新选项卡和新窗口之间的主要区别是什么 唯一的
  • IntelliJ IDEA 不会加载在我的磁盘上找到的 Groovy

    您好 我最近想开始在 Groovy 中进行开发 但是当我尝试 IntelliJ IDEA 时 它不会加载 Groovy 因为它显示 看起来指定路径中的 Groovy 分发已损坏 不能 确定版本 发生了什么事我什至尝试了一些旧版本 但它也不起
  • 使用 Mono.Cecil 发出对 System.Lazy 构造函数的调用

    我正在尝试发出一种实例化 System Lazy 的方法 但失败并出现 无效令牌 的 PEVerify 错误 位于该行newobj instance void class mscorlib System Lazy 1
  • Next.JS 代码为何同时在服务器和客户端上运行?

    在 Next JS 应用程序中 您会看到组件的代码在服务器和客户端上运行 因此 如果您有以下代码 const Title gt console log gt Hello return h1 Some title h1 然后您在开发环境中运行
  • 将 ObservableCollection 绑定到 DataGridView

    我正在将可观察集合 FoodList 绑定到 WinForm 中的 BindingSource 此 BindingSource 由表单上的数据网格使用 我假设当我向集合中添加一个新项目时 它会引发一个事件 并且一个新行会出现在我的网格中 但
  • 如何使用RVM管理多个gemset和ruby版本?

    我对 RVM 网站上给出的解释感到非常困惑 我不清楚不同的红宝石解释器和宝石集之间的关系 按照我的说法 是这样的 我的 Mac 帐户有一个 rvm 该 nvm 安装并管理一组不同版本的 ruby 解释器 每个红宝石版本都有一组宝石 我把事情
  • 从 mongoengine 中的文档获取必填字段?

    我希望能够获取我创建的文档所需的列表或某种字段集 例如 这是我的文档 nickName StringField required True password StringField required True firstName Strin
  • 设置 Fcm 通知优先级 - Azure 通知中心

    我正在尝试在 C SDK 中的 Fcm 通知有效负载上设置高优先级 以便从后端将其发送到移动应用程序 根据 Fcm 文档 Json Paylod 应该如下所示 message topic subscriber updates notific
  • 即使通过 PuTTY 连接到 Windows 上的 GitHub 时也出现问题

    我知道已经在各个地方 Stack Overflow 内外 讨论了这个问题 但我还没有找到一致有效的解决方案 现在 我正在尝试通过 putty 连接到 github 我正在连接到 github com 加载我的私钥 并获得 登录为 迅速的 当
  • CSS 目标只是类名以字符串开头和结尾

    我想为我们公司创建某些标准的 css 代码 作为品牌 我想以我的公司名称开始所有类名 并以 Cls 结尾 div class Nam StdCss Cls div div class Nam StdCss Raduis Cls div di
  • 如何最小化asp.net中页面的视图状态大小?

    如何最小化asp net中页面的视图状态大小 请帮忙 您有多种选择来减少 ViewState 禁用视图状态对于不需要它的控件 这是最有效的解决方案 例如 如果您可以在服务器上缓存一些数据 那么您可以为每个请求重新绑定任何数据绑定控件 并且不
  • Flutter中main函数和runApp()函数有什么区别?

    我倾向于问这个问题 因为大多数时候我们直接调用 runApp 函数 main 而不执行其他操作 我的问题是为什么 runApp 和 main 保持不同 可能很简单 保留 main 函数或 runApp 函数 而放弃其他函数 在 Dart 中
  • 正则表达式:如果字母与数字相邻,则添加空格

    我正在使用 PHP 但不太擅长使用正则表达式 我需要一个 preg replace 如果字母或数字相邻 它可以添加空格 这些是场景 mystreet12 gt mystreet 12 mystreet 38B gt mystreet 38
  • Base10 到 Base64 网址缩短

    我正在为一个正在学习 php 的项目编写一个 url 缩短函数 这是代码 顺便说一句 我想global这不是一件好事 P alphabet array 1 gt a b c d e f g h i j k l m n o p q r s t
  • 如何在 Pygame 中按住“按键”?

    我使用 Pygame 1 9 6 和 Python 3 7 4 我想按住空格键 它会不断地一遍又一遍地执行相同的操作 我知道如何按下按钮KEYDOWN 我看了下问题 如何在 Pygame 中有效地按住键 寻求答案 但无法理解一个答案 whi
  • Delphi 编译和构建在同一项目上生成不同的二进制文件

    在新的 VCL 应用程序中Compile and Build操作生成相同的二进制文件和映射文件 即使关闭 在项目中包含版本信息 选项 exe 文件末尾也有细微差别 已经讨论过 映射文件的字节与字节相同 但是当我添加任何第三方组件时 构建和编
  • 从 ul li jquery 获取所选项目

    您好 我正在动态地在 ul li HTML 标记中填充一个列表 我所需要的只是获取相应 ul 的选定 li 的值 我尝试了所有可能的 jquery 方法 但仍然未定义 我将 ul li 填充为 jQuery get url function