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 相关文章推荐
js树形控件脚本代码
Jul 24 Javascript
在Javascript中处理字符串之big()方法的使用
Jun 08 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 Javascript
JS轮播图中缓动函数的封装
Nov 25 Javascript
vue实现动态数据绑定
Apr 28 Javascript
老生常谈js中的MVC
Jul 25 Javascript
vue中实现滚动加载更多的示例
Nov 08 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 Javascript
vue实现直播间点赞飘心效果的示例代码
Sep 20 Javascript
使用js实现单链解决前端队列问题的方法
Feb 03 Javascript
Angular之jwt令牌身份验证的实现
Feb 14 Javascript
详解vue中在父组件点击按钮触发子组件的事件
Nov 13 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
Opcache导致php-fpm崩溃nginx返回502
2015/03/02 PHP
php实现的通用图片处理类
2015/03/24 PHP
Zend Framework教程之模型Model基本规则和使用方法
2016/03/04 PHP
PHP基于phpqrcode类生成二维码的方法示例详解
2020/08/07 PHP
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
通过函数作用域和块级作用域看javascript的作用域链
2018/08/05 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
vue 解除鼠标的监听事件的方法
2019/11/13 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
javascript实现放大镜功能
2020/12/09 Javascript
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
基于Python的接口测试框架实例
2016/11/04 Python
python 批量修改 labelImg 生成的xml文件的方法
2019/09/09 Python
python实现LRU热点缓存及原理
2019/10/29 Python
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
New Balance英国官方网站:始于1906年,百年慢跑品牌
2016/12/07 全球购物
vue实现倒计时功能
2021/03/24 Vue.js
护士实习生自我鉴定范文
2013/12/10 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
收费员岗位职责
2015/02/14 职场文书
旅游投诉信范文
2015/07/02 职场文书
教师节大会主持词
2015/07/06 职场文书
JavaScript如何利用Promise控制并发请求个数
2021/05/14 Javascript
Python提取PDF指定内容并生成新文件
2021/06/09 Python
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python