首页 > 其他分享 >前端获取select选中的option的数据

前端获取select选中的option的数据

时间:2022-11-06 18:13:04浏览次数:34  
标签:index option text 获取 选中 options select

 

 
设置默认选中可在option 中添加 selected = "selected",具体举例如下:
 
<option value="2" selected="selected">test2</option>  
 
<select id="citySel" class="select">
    <option value="">请选择城市</option>
    <option value="sh">上海</option>
    <option value="bj">北京</option>
    <option value="gz">广州</option>
    <option value="sz">深圳</option>
</select>

 


方法一:javascript

1:获取select对象: var Sel=document.getElementById("citySel");

2:取到选中项的索引:var index=Sel.selectedIndex ; // selectedIndex是所选中的项的index

3:获取选中项的value: myselect.options[index].value;

4:取到选中项的文本内容: myselect.options[index].text;
// selectedIndex是所选中的项的index

3:获取选中项的value: myselect.options[index].value;

4:取到选中项的文本内容: myselect.options[index].text;
方法二:jquery

1:var options=$("#citySel option:selected"); //获取选中的option

2:options.val(); //拿到选中项的值,比如选中上海,获取的值为“sh”;

3:options.text(); //拿到选中项的文本,比如选中上海,获取的值为“上海”
//获取选中的option

2:options.val(); //拿到选中项的值,比如选中上海,获取的值为“sh”;

3:options.text(); //拿到选中项的文本,比如选中上海,获取的值为“上海

标签:index,option,text,获取,选中,options,select
From: https://www.cnblogs.com/pxblog/p/16863240.html

相关文章

  • IOptions <Options> wrapper
    IOptions<TestOptions>wrapper【ASP.NETCore】选项模式的相关接口 在.NET中,配置与选项模式其实有联系的(这些功能现在不仅限于ASP.NETCore,而是作为平台扩展来提......
  • MultipleSelection_Dropdown——Dropdown复选框扩展
     参考文章:https://www.cnblogs.com/chinarbolg/p/9601417.html  https://www.cnblogs.com/Fivee/p/13099362.html usingSystem.Collections.Generic;usingUnit......
  • select使用方法
    一、语法格式SELECT字段1,字段2,字段3 多个字段时,中间使用逗号隔开select可以查询表中所有的字段,也可以查询指定的字段;二、使用方法查询所有字段时,后面跟**是通配符......
  • 微信小程序隐私指引完整填写范本(开发者收集你选中的照片或视频信息,用于?)
    为了分辨用户,开发者将在获取你的明示同意后,收集你的微信昵称、头像。为了显示距离,开发者将在获取你的明示同意后,收集你的位置信息。开发者收集你的地址,用于获取位置信息。......
  • .Netcore IOptions<LoggerFilterOptions> 获取的顺序
    .netcore配置文件的日志级别:{"Logging":{"LogLevel":{"Default":"Information","Microsoft":"Trace","Microsoft.Hosting.Lifetime......
  • 二次封装 Vue-Treeselect 组件
    场景开发中多个地方都需要用到vue-treeselect组件,于是想二次封装成SelectTree组件便于使用。需求1:自定义选项样式插槽option-labelSelectTree组件预留插槽`diy-......
  • Java核心工具库Guava介绍以及Optional和Preconditions使用进行非空和数据校验
    场景GuavaGuava项目是Google公司开源的Java核心库,它主要是包含一些在Java开发中经常使用到的功能,如数据校验、不可变集合、计数集合,集合增强操作、I/O、缓存、字......
  • bootstrap-select的使用
    引入css<linkrel="stylesheet"href="{%static'plugin/bootstrap-select/css/bootstrap-select.min.css'%}">引入js<scriptsrc="{%static'plugin/bootstrap-sel......
  • select * 和select 1 以及 select count(*) 和select count(1)的区别
    select1和select*select*from表;查询出表中所有数据,性能比较差;select常量from表;查询出结果是所有记录数的常量,性能比较高;selelct常量from...对应所有行,返......
  • sqlserver查询语句SELECT
    SELECT查询语句数据查询是数据库的核心操作,其功能是指根据用户的需要从数据库中提取所需数据,通过SQL的数据操纵语言的SELECT语句可以实现数据库数据的查询。SELECT语句是......