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 相关文章推荐
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
Jan 07 Javascript
js函数模拟显示桌面.scf程序示例
Apr 20 Javascript
javascript继承机制实例详解
Nov 20 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
Mar 13 Javascript
Bootstrap导航条学习使用(一)
Feb 08 Javascript
javaScript实现滚动条事件详解
Mar 24 Javascript
vue router使用query和params传参的使用和区别
Nov 13 Javascript
vue axios请求拦截实例代码
Mar 29 Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
基于JavaScript实现轮播图效果
Jan 02 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下把数组保存为文件格式的实例应用
2010/02/08 PHP
php在线解压ZIP文件的方法
2014/12/30 PHP
Yii2框架自定义验证规则操作示例
2019/02/08 PHP
Laravel 框架返回状态拦截代码
2019/10/18 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
百度 popup.js 完美修正版非常的不错 脚本之家推荐
2009/04/17 Javascript
javascript 异常处理使用总结
2009/06/21 Javascript
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
用js实现trim()的解决办法
2013/04/16 Javascript
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
Windows8下搭建Node.js开发环境教程
2014/09/03 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
javascript先序遍历DOM树的方法
2016/02/27 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
2016/04/01 Javascript
浅谈javascript中new操作符的原理
2016/06/07 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
JQuery中DOM节点的操作与访问方法实例分析
2019/12/23 jQuery
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
python编写俄罗斯方块
2020/03/13 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
2019/02/18 HTML / CSS
前台文员岗位职责及工作流程
2013/11/19 职场文书
护士毕业生自荐信
2014/02/07 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
网络管理员岗位职责
2014/03/17 职场文书
代理协议书
2014/04/22 职场文书
实习单位意见
2015/06/04 职场文书
高中生军训感言
2015/08/01 职场文书
SpringCloud之@FeignClient()注解的使用方式
2021/09/25 Java/Android