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获取指定日期周数以及星期几的小例子
Jun 27 Javascript
JavaScript中的alert()函数使用技巧详解
Dec 29 Javascript
Javascript基础回顾之(三) js面向对象
Jan 31 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
Feb 14 Javascript
jQuery点击头像上传并预览图片
Feb 23 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
原生JS实现图片懒加载(lazyload)实例
Jun 13 Javascript
Vue2 监听属性改变watch的实例代码
Aug 27 Javascript
详解Vue项目中实现锚点定位
Apr 24 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
vue下axios拦截器token刷新机制的实例代码
Jan 17 Javascript
mustache.js实现首页元件动态渲染的示例代码
Dec 28 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使用DES进行加密与解密的方法详解
2013/06/06 PHP
php实现文件编码批量转换
2014/03/10 PHP
php使用codebase生成随机数
2014/03/25 PHP
ThinkPHP应用模式扩展详解
2014/07/16 PHP
PHP处理大量表单字段的便捷方法
2015/02/07 PHP
php多进程应用场景实例详解
2019/07/22 PHP
Riot.js 快速的JavaScript单元测试框架
2009/11/09 Javascript
js 弹出菜单/窗口效果
2011/10/30 Javascript
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
jQuery插件开发的五种形态小结
2015/03/04 Javascript
JS实现网页上随滚动条滚动的层效果代码
2015/11/04 Javascript
微信小程序 教程之模板
2016/10/18 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
2017/04/11 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
2019/11/26 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
[02:51]DOTA2英雄基础教程 风暴之灵
2013/12/23 DOTA
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
Python中的推导式使用详解
2015/06/03 Python
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
使用Python生成XML的方法实例
2017/03/21 Python
python ansible服务及剧本编写
2017/12/29 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
Python中的heapq模块源码详析
2019/01/08 Python
PyTorch: 梯度下降及反向传播的实例详解
2019/08/20 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
Python数组并集交集补集代码实例
2020/02/18 Python
一文带你掌握Pyecharts地理数据可视化的方法
2021/02/06 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
Links of London官方网站:英国标志性的珠宝品牌
2017/04/09 全球购物
经贸日语专业个人求职信
2013/12/13 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
详解Python魔法方法之描述符类
2021/05/26 Python
vue中div禁止点击事件的实现
2022/04/02 Vue.js