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拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
May 07 Javascript
javascript实现类似超链接的效果
Dec 26 Javascript
jQuery中slideUp 和 slideDown 的点击事件
Feb 26 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 Javascript
weui框架实现上传、预览和删除图片功能代码
Aug 24 Javascript
JavaScript对象拷贝与赋值操作实例分析
Dec 10 Javascript
vue与bootstrap实现简单用户信息添加删除功能
Feb 15 Javascript
微信小程序swiper实现文字纵向轮播提示效果
Jan 21 Javascript
Vue中computed和watch有哪些区别
Dec 19 Vue.js
利用uni-app生成微信小程序的踩坑记录
Apr 05 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管理Session的回调函数详解
2013/06/21 PHP
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
php配合jquery实现增删操作具体实例
2013/12/12 PHP
php权重计算方法代码分享
2014/01/09 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
js下弹出窗口的变通
2007/04/18 Javascript
转一个日期输入控件,支持FF
2007/04/27 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
2011/03/10 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
2011/10/23 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
javascript事件冒泡简单示例
2016/06/20 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
jQuery序列化后的表单值转换成Json
2017/06/16 jQuery
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
async/await优雅的错误处理方法总结
2019/01/30 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
在vue中利用v-html按分号将文本换行的例子
2019/11/14 Javascript
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
JS一次前端面试经历记录
2020/03/19 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
python使用cookielib库示例分享
2014/03/03 Python
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
查看端口并杀进程python脚本代码
2019/12/17 Python
CSS3弹性盒模型开发笔记(三)
2016/04/26 HTML / CSS
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
应用化学专业职业生涯规划书
2013/12/31 职场文书
大学生个人自荐信
2014/02/24 职场文书
经典婚礼主持词
2014/03/13 职场文书
幼儿园中班下学期评语
2014/04/18 职场文书
原料仓管员岗位职责
2015/04/01 职场文书
经理岗位职责范本
2015/04/15 职场文书
年会主持人开场白台词
2015/05/29 职场文书