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 相关文章推荐
javascript 必知必会之closure
Sep 21 Javascript
JavaScript 学习笔记(十二) dom
Jan 21 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
Apr 15 Javascript
JavaScript监听和禁用浏览器回车事件实例
Jan 31 Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 Javascript
js微信分享API
Oct 11 Javascript
原生js实现可拖动的登录框效果
Jan 21 Javascript
基于vue的短信验证码倒计时demo
Sep 13 Javascript
详解Vue Elememt-UI构建管理后台
Feb 27 Javascript
小程序获取周围IBeacon设备的方法
Oct 31 Javascript
微信小程序使用component自定义toast弹窗效果
Nov 27 Javascript
vue实现的仿淘宝购物车功能详解
Jan 27 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
超级简单的php+mysql留言本源码
2009/11/11 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
Yii2.0 RESTful API 基础配置教程详解
2018/12/26 PHP
浅谈PHP匿名函数和闭包
2019/03/08 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
2017/02/21 Javascript
使用D3.js+Vue实现一个简单的柱形图
2018/08/05 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
JavaScript原型对象原理与应用分析
2018/12/27 Javascript
Koa日志中间件封装开发详解
2019/03/09 Javascript
微信小程序实现搜索历史功能
2020/03/26 Javascript
jquery实现下载图片功能
2019/07/18 jQuery
[40:10]2015国际邀请赛全明星表演赛
2015/08/07 DOTA
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
Python判断中文字符串是否相等的实例
2018/07/06 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
Python对HTML转义字符进行反转义的实现方法
2019/04/28 Python
python定时复制远程文件夹中所有文件
2019/04/30 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
Python对excel的基本操作方法
2021/02/18 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
大学生最新职业生涯规划书范文
2014/01/12 职场文书
计算机学生求职信范文
2014/01/30 职场文书
学习十八大报告感言
2014/02/28 职场文书
统计员岗位职责
2015/02/11 职场文书
教师求职自荐信
2015/03/26 职场文书
小学远程教育工作总结
2015/08/13 职场文书
法制教育主题班会
2015/08/13 职场文书
详解redis在微服务领域的贡献
2021/10/16 Redis
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android
十大最帅动漫男主 碓冰拓海上榜,第一是《灌篮高手》男主角
2022/03/18 日漫