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 相关文章推荐
JQUBAR1.1 jQuery 柱状图插件发布
Nov 28 Javascript
使用jquery实现div的tab切换实例代码
May 27 Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 Javascript
JavaScript基础知识及常用方法总结
Jan 10 Javascript
Javascript数组Array方法解读
Mar 13 Javascript
JavaScript必知必会(九)function 说起 闭包问题
Jun 08 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
Aug 21 Javascript
BootStrap的table表头固定tbody滚动的实例代码
Aug 24 Javascript
JS实现对json对象排序并删除id相同项功能示例
Apr 18 Javascript
node.js的http.createServer过程深入解析
Jun 06 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
Sep 11 Javascript
ant design charts 获取后端接口数据展示
May 25 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
教你在header中隐藏php的版本信息
2016/08/10 PHP
你可能不再需要JQUERY
2021/03/09 Javascript
Prototype PeriodicalExecuter对象 学习
2009/07/19 Javascript
DWZ刷新dialog解决方法
2013/03/03 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
Bootstrap每天必学之折叠
2016/04/12 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
Javascript的比较汇总
2016/07/25 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
js实现验证码干扰(动态)
2021/02/23 Javascript
python多线程抓取天涯帖子内容示例
2014/04/03 Python
Ubuntu 下 vim 搭建python 环境 配置
2017/06/12 Python
python调用系统ffmpeg实现视频截图、http发送
2018/03/06 Python
python学生管理系统
2019/01/30 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
Python调用OpenCV实现图像平滑代码实例
2020/06/19 Python
Python绘图实现台风路径可视化代码实例
2020/10/23 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
Book Depository亚太地区:一家领先的国际图书零售商
2019/05/05 全球购物
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
存储过程和函数的区别
2013/05/28 面试题
计算机科学与技术应届生求职信
2013/11/07 职场文书
初三学习计划书范文
2014/04/30 职场文书
2014年教师政治学习材料
2014/06/02 职场文书
小学运动会开幕词
2015/01/28 职场文书
订货会邀请函
2015/01/31 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书
大学生社会服务心得体会
2016/01/22 职场文书