select获取下拉框的值 下拉框默认选中方法


Posted in Javascript onFebruary 28, 2018

本文主要介绍select下拉框的相关方法。

1、通过id获取下拉框的value和文本值

例如:

<select class="form-control" id="numbers">
      <option value="1">数字1</option>
      <option value="2" selected>数字2</option>
</select>
$("#numbers option:selected").val(); 获取到下拉框被选中的optionde value值:2;
$("#numbers option:selected").text(); 获取到下拉框被选中的optionde 文本内容:数字2;

2、默认选中某个select值:增加selected属性

select获取下拉框的值 下拉框默认选中方法

input框中输入数字,失去焦点时调用selectNumber()方法,选中与input框中相同的数字

function selectNumber(){
var num = $("#num").val(); //获取input中输入的数字
var numbers = $("#numbers").find("option"); //获取select下拉框的所有值
for (var j = 1; j < numbers.length; j++) {
if ($(numbers[j]).val() == num) {
$(numbers[j]).attr("selected", "selected");
}
} 
}

以上这篇select获取下拉框的值 下拉框默认选中方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery入门第一课 jQuery选择符
Mar 14 Javascript
js中的getAttribute方法使用示例
Aug 01 Javascript
js获取页面description的方法
May 21 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 Javascript
jquery实现滑动特效代码
Aug 10 Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 Javascript
微信小程序之购物车功能
Sep 23 Javascript
element-ui表格数据转换的示例代码
Aug 24 Javascript
js数组去重的方法总结
Jan 18 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 Javascript
javascript实现电商放大镜效果
Nov 23 Javascript
mapboxgl实现带箭头轨迹线的代码
Jan 04 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 #Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
Feb 28 #Javascript
Vue-Router模式和钩子的用法
Feb 28 #Javascript
angularjs 获取默认选中的单选按钮的value方法
Feb 28 #Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 #Javascript
vue cli 全面解析
Feb 28 #Javascript
js实现动态改变radio状态的方法
Feb 28 #Javascript
You might like
《雄兵连》《烈阳天道》真的来了
2020/07/13 国漫
php.ini中date.timezone设置分析
2011/07/29 PHP
浅析PHP 按位与或 (^ 、&amp;)
2013/06/21 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
express的中间件bodyParser详解
2014/12/04 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
2015/08/21 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
jquery 手势密码插件
2017/03/17 Javascript
js 发布订阅模式的实例讲解
2017/09/10 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
2018/01/11 Javascript
TypeScript类型声明书写详解
2019/08/28 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
[28:48]《真视界》- 2017年国际邀请赛
2017/09/27 DOTA
python实现寻找最长回文子序列的方法
2018/06/02 Python
基于python中theano库的线性回归
2018/08/31 Python
python同时遍历数组的索引和值的实例
2018/11/15 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
Django 限制访问频率的思路详解
2019/12/24 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
python性能测试工具locust的使用
2020/12/28 Python
html5新增的定时器requestAnimationFrame实现进度条功能
2018/12/13 HTML / CSS
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
求职简历自荐信范文
2013/10/21 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
贸易经济专业自荐书
2014/06/29 职场文书
2014年客房部工作总结
2014/11/22 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android