首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何从动态创建的具有相同id的元素中获取select .val()或div .text()?

从动态创建的具有相同id的元素中获取select .val()或div .text()的方法是通过使用类选择器或其他属性选择器来选择元素,而不是使用id选择器。因为id应该是唯一的,不应该在同一文档中存在多个具有相同id的元素。

对于select元素,可以使用类选择器或其他属性选择器来选择具有相同类名或其他相同属性的元素,并使用.val()方法来获取其值。例如,如果具有相同类名"my-select"的多个select元素,可以使用类选择器".my-select"来选择它们,并使用.val()方法来获取选中的值。

对于div元素,可以使用类选择器或其他属性选择器来选择具有相同类名或其他相同属性的元素,并使用.text()方法来获取其文本内容。例如,如果具有相同类名"my-div"的多个div元素,可以使用类选择器".my-div"来选择它们,并使用.text()方法来获取它们的文本内容。

以下是一个示例代码:

HTML:

代码语言:txt
复制
<select class="my-select">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

<select class="my-select">
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
  <option value="6">Option 6</option>
</select>

<div class="my-div">Text 1</div>
<div class="my-div">Text 2</div>

JavaScript:

代码语言:txt
复制
// 获取select元素的值
var selectValues = [];
$(".my-select").each(function() {
  selectValues.push($(this).val());
});
console.log(selectValues);

// 获取div元素的文本内容
var divTexts = [];
$(".my-div").each(function() {
  divTexts.push($(this).text());
});
console.log(divTexts);

上述代码中,使用类选择器".my-select"选择所有具有类名"my-select"的select元素,并使用.each()方法遍历它们,通过$(this).val()获取每个select元素的值,并将其存储在selectValues数组中。同样地,使用类选择器".my-div"选择所有具有类名"my-div"的div元素,并使用.each()方法遍历它们,通过$(this).text()获取每个div元素的文本内容,并将其存储在divTexts数组中。

请注意,为了避免混淆和冲突,建议在动态创建元素时使用不同的类名或其他属性来标识它们,而不是使用相同的id。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • select2 api参数的文档

    // 加载数据 $("#e11").select2({ placeholder: "Select report type", allowClear: true, data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}] }); // 加载数组 支持多选 $("#e11_2").select2({ createSearchChoice:function(term, data) { if ($(data).filter(function() { return this.text.localeCompare(term)===0; }).length===0) {return {id:term, text:term};} }, multiple: true, data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}] }); function log(e) { var e=$("

  • "+e+"
  • "); $("#events_11").append(e); e.animate({opacity:1}, 10000, 'linear', function() { e.animate({opacity:0}, 2000, 'linear', function() {e.remove(); }); }); } // 对元素 进行事件注册 $("#e11") .on("change", function(e) { log("change "+JSON.stringify({val:e.val, added:e.added, removed:e.removed})); }) // 改变事件 .on("select2-opening", function() { log("opening"); }) // select2 打开中事件 .on("select2-open", function() { log("open"); }) // select2 打开事件 .on("select2-close", function() { log("close"); }) // select2 关闭事件 .on("select2-highlight", function(e) { log ("highlighted val="+ e.val+" choice="+ JSON.stringify(e.choice));}) // 高亮 .on("select2-selecting", function(e) { log ("selecting val="+ e.val+" choice="+ JSON.stringify(e.choice));}) // 选中事件 .on("select2-removing", function(e) { log ("removing val="+ e.val+" choice="+ JSON.stringify(e.choice));}) // 移除中事件 .on("select2-removed", function(e) { log ("removed val="+ e.val+" choice="+ JSON.stringify(e.choice));}) // 移除完毕事件 .on("select2-loaded", function(e) { log ("loaded (data property omitted for brevity)");}) // 加载中事件 .on("select2-focus", function(e) { log ("focus");}) // 获得焦点事件 .on("select2-blur", function(e) { log ("blur");}); // 失去焦点事件 $("#e11").click(function() { $("#e11").val(["AK","CO"]).trigger("change"); }); 官网文档地址是:http://select2.github.io/select2/#documentation。说再多也没用,最后我们来个实例来证明一下ajax请求远程数据,以截图为准:

    05

    jquery 操作 select

    jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3. var checkValue=$("#select_id").val(); //获取Select选择的Value 4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值 5. var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值 jQuery获取Select元素,并设置的 Text和Value: 实例分析: 1. $("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中 2. $("#select_id ").val(4); // 设置Select的Value值为4的项选中 3. $("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中 jQuery添加/删除Select元素的Option项: 实例分析: 1. $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项) 2. $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置) 3. $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个) 4. $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个) 5. $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option 6. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option 三级分类 <select name="thirdLevel" id="thirdLevel" onchange="getFourthLevel()"> <option value="0" id="thirdOption"> 请选择三级分类 </option> </select>

    四级分类: <select name="fourthLevelId" id="fourthLevelId"> <option value="0" id="fourthOption"> 请选择四级分类 </option> </select>
    .if($("#thirdLevel").val()!=0){ $("#thirdLevel option[value!=0]").remove(); } if($("#fourthLevelId").val()!=0){ $("#fourthLevelId option[value!=0]").remove(); }//这个表示:假如我们希望当选择选择第三类时:如果第四类中有数据则删除,如果没有数据第四类的商品中的为默认值。在后面学习了AJAX技术后经常会使用到!

    02

    document.onreadystatechange_js转json格式

    onreadystatechange 事件通常用在基于 XMLHttpRequest 对象的 AJAX 应用中,当的该对象的 load state 改变时,会触发此事件。

    01

    Jquery 常见案例

    版权声明:本文为博主原创文章,未经博主允许不得转载。

    01

    day40_jQuery学习笔记_01

    day01: jQuery基础 --> 选择器、属性和CSS、文档处理 day02: jQuery高级 --> 筛选、事件、效果(动画)、ajax

    02

    jQuery的基本操作

    jQuery就是一个js的库· 主要分为两部分:            1·寻找元素         (选择器,筛选器)            2·操作元素          (CSS的操作,属性的操作,文本的处理) 选择器 基本  #id    #id //用于搜索的,通过元素的id属性中给定的值 描述:(查找ID为myDiv的元素) HTML代码:

    如何实现动态添加的元素添加点击事件

    在页面开发过程中常常遇到需要动态添加元素,然后给这一元素绑定相关事件的情况,这种情况下一般需要给元素加上相关属性,然后写这些元素的事件函数即可。动态添加的元素怎么绑定事件呢?

    02

    Vue02基础语法-插值+过滤器+计算属性+计算属性

    示例: 使用计算属性,计算书本的总价定义测试数据,和计算属性,计算属性遍历书本记录,计算总价

    02

    JQuery-命令速查-CheatSheet

    http://stackoverflow.com/questions/31379409/form-submission-causing-maximum-call-stack-size-exceeded

    03

    JQuery快速入门

    Write less, do more, I like jQuery. jQuery是最常用的js库,整体来说非常轻量并易于扩展,对于移动应用可以使用其更轻量的孪生兄弟Zepto代替。其是由John

    010

    VUE中的模板语法以及过滤器和双向数据绑定

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。vue将模板编译成虚拟dom, 结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。

    01

    layui弹窗间的传值(layui弹出层传值)(窗口传值)[通俗易懂]

    主要有两部分 1、从主窗口传值到弹出层 2、从弹出层传值到主窗口 3、通过session互传 4、通过调用父窗口的函数从而获取到父窗口的值(相反也是可以的)

    02

    select2 使用教程(简)「建议收藏」

    用了这么久的Select2插件,也该写篇文章总结总结。当初感觉Select2不是特别好用,但又找不到比它更好的下拉框插件。

    02

    jQuery

    jQuery jQuery介绍 jQuery 是一个轻量级的、兼容多浏览器的JavaScript 库; jQuery 使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript 编程。它的宗旨就是:Write less,do more.“ jQuery的优势 一款轻量级的JS框架。jQuery核心js文件才几十kb,不会影响页面加载速度。 丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻元素,J

    05

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券