jquery操作select(取值,设置选中)

jquery操作select(增加,删除,清空)  

http://huapengpeng1989412.blog.163.com/blog/static/58828754201342841940720/

 jQuery获取Select选择的TextValue: 

1
2
3
4
5
6
7
8
9
$("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发
var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的text
var checkValue=$("#select_id").val(); //获取Select选择的Value
var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值
var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值

jQuery添加/删除Select的Option项: 

1
2
3
4
5
6
7
8
9
10
11
$("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)
$("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)
$("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)
$("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)
$("#select_id option[value='3']").remove(); //删除Select中Value='3'的Optiona
$("#select_id option[text='4']").remove(); //删除Select中Text='4'的Optiona

内容清空:

1
$("#charCity").empty();

 

http://blog.csdn.net/nairuohe/article/details/6307367

每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了。

比如<select class="selector"></select>

1、设置value为pxx的项选中

     $(".selector").val("pxx");

2、设置text为pxx的项选中

    $(".selector").find("option[text='pxx']").attr("selected",true);

    这里有一个中括号的用法,中括号里的等号的前面是属性名称,不用加引号。很多时候,中括号的运用可以使得逻辑变得很简单。

3、获取当前选中项的value

    $(".selector").val();

4、获取当前选中项的text

    $(".selector").find("option:selected").text();

    这里用到了冒号,掌握它的用法并举一反三也会让代码变得简洁。

 

很多时候用到select的级联,即第二个select的值随着第一个select选中的值变化。这在jquery中是非常简单的。

如:

复制代码
$(".selector1").change(function(){// 先清空第二个$(".selector2").empty();// 实际的应用中,这里的option一般都是用循环生成多个了var option = $("<option>").val(1).text("pxx");$(".selector2").append(option);
});
复制代码

 

http://www.cnblogs.com/yaoshiyou/archive/2010/08/24/1806939.html

jQuery获取Select选择的Text和Value:
语法解释:

$("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发
var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text
var checkValue=$("#select_id").val();  //获取Select选择的Value
var checkIndex=$("#select_id ").get(0).selectedIndex;  //获取Select选择的索引值
var maxIndex=$("#select_id option:last").attr("index");  //获取Select最大的索引值


jQuery设置Select选择的 Text和Value:
语法解释:

$("#select_id ").get(0).selectedIndex=1;  //设置Select索引值为1的项选中
$("#select_id ").val(4);   // 设置Select的Value值为4的项选中
$("#select_id option[text='jQuery']").attr("selected", true);   //设置Select的Text值为jQuery的项选中

 

jQuery添加/删除Select的Option项:
语法解释:

复制代码
$("#select_id").append("<option value='Value'>Text</option>");  //为Select追加一个Option(下拉项)
$("#select_id").prepend("<option value='0'>请选择</option>");  //为Select插入一个Option(第一个位置)
$("#select_id option:last").remove();  //删除Select中索引值最大Option(最后一个)
$("#select_id option[index='0']").remove();  //删除Select中索引值为0的Option(第一个)
$("#select_id option[value='3']").remove();  //删除Select中Value='3'的Option
$("#select_id option[text='4']").remove();  //删除Select中Text='4'的Option
复制代码

 

http://www.cnblogs.com/SAL2928/archive/2008/10/28/1321285.html

jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关 
获 取一组radio被选中项的值 
var item = $('input[name=items][checked]').val(); 
获 取select被选中项的文本 
var item = $("select[name=items] option[selected]").text(); 
select下拉框的第二个元素为当前选中值 
$('#select_id')[0].selectedIndex = 1; 
radio单选组的第二个元素为当前选中值 
$('input[name=items]').get(1).checked = true; 
获取值: 
文本框,文本区域:$("#txt").attr("value"); 
多选框 checkbox:$("#checkbox_id").attr("value"); 
单选组radio:   $("input[type=radio][checked]").val(); 
下拉框select: $('#sel').val(); 
控制表单元素: 
文本框,文本区域:$("#txt").attr("value",'');//清空内容 
$("#txt").attr("value",'11');//填充内容 
多选框checkbox: $("#chk1").attr("checked",'');//不打勾 
$("#chk2").attr("checked",true);//打勾 
if($("#chk1").attr('checked')==undefined) //判断是否已经打勾 
单选组 radio:    $("input[type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项 
下拉框 select:   $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项 
$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option 
$("#sel").empty();//清空下拉框

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247821.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

手机验证码获取

<el-form-item label"短信验证码" required><el-input v-model"ruleForm.verificationcode" placeholder"请添加验证码"><el-button v-if"isdisabled" slot"suffix" style"color:#409EFF;" type&…

在bootstrap table中使用Tooltip

//偏好主题function preferenceFormatter(value, row, index) {var nameString "";if (value.length > 6) {nameString value.substring(0,6) ...;} else{nameString value;}return [<a href"#" data-toggle"tooltip" title value >…

实现值两者之间添加 , 、 | 等字符

展示效果&#xff1a; <span v-for"(item, index) in projectData.bdOwnerList" :key"index"><span style"white-space: nowrap">{{ item.userName }}<spanv-if"projectData.bdOwnerList.length - 1 ! index"style&qu…

状态管理工具vuex的基本使用(vuebus的理解)

vuex的展示图 1. vuex 的基本结构 const store new Vuex.Store({state: {} //相当于 vue结构中的 data getters: {}, // 相当于vue结构中的计算属性使用actions: {}, // 相当于vue结构中的监听属性使用mutations: {},//相当于vue结构中的 methods 方法集合 &#xff08;其中方…

Django.1

Django官方网站&#xff1a;https://www.djangoproject.com/ 使用终端创建Django文件 创建工程 django-admin startproject XXX 创建应用 python manage.py startapp YYY 迁移系统指令&#xff1a; 首先生成迁移文件 python manage.py makemigrations 执行迁移文件 python ma…

vue项目水印添加

import DomSize from wd-domsize-monitor; // 此处为 npm 下载的第三方模块包 import Api_login from "/assets/api/login" // 此处是用户信息接口调用var id shuiyinDiv var isInit false let callback function (ele) {DomSize.bind(ele, function () {//水印被…

mybatis传参

在mybatis的学习中&#xff0c;会发现经常需要传参&#xff0c;这里以上一节写的实体类为基础&#xff0c;当我们要添加一个员工时&#xff0c;需要添加员工的基本信息&#xff0c;以及所属部门&#xff0c;按照以前的方法&#xff0c;在实体类中&#xff0c;添加部门id属性&am…

自定义步骤条

展示图&#xff1a; <template><div classcreateorder><!-- 顶部步骤条 --><div class"createorder_top"><div class"createorder_top_left"><!-- 0 --><span class"createorder_left_set" :class"…

element组件库中table自定义分页效果

1.在data中设置初始值 // 页数 页码search: { offset: 1, // 当前页limit: 10, // 条数total:0, //总数},2.设置获取后的数据分配 :data"tableData.slice((search.offset - 1) * search.limit, search.offset * search.limit)" 3.展示效果&#xff1a;

数据轮播图翻页封装(左右点击)

效果图&#xff1a; <template><div class"box" style"height:200px;"><!-- 左 --><div class"box-left" click"submitrote(left)" mouseenter"chenge_menu(1)" mouseleave"chenge_menu(2)"…

087-把PHP数组中的元素按随机顺序重新排列shuffle

<?php$arrarray(3,23,A,f,123,hello); //定义一个数组echo 排序之前的数组信息&#xff1a;<br>;print_r($arr);shuffle($arr); //对数组进行随机排序echo <br>排序之后的数组信息&#xff1a;<br>;print_r($arr); //输出数组信息#…

基于Element ui 实现输入框只能输入数字并支持千分位

实现效果 设置子组件 <template><el-inputref"money"v-model.trim"money":placeholder"placeholder"v-bind"$attrs"v-on"$listeners"input"formatNumber(money,money)"keyup.enter.native"moneyCh…

Vue-使用webpack+vue-cli搭建项目

一、准备 安装NodeJs 安装Webpack 配置环境变量 技巧使用&#xff1a; 1. npm 淘宝路径配置&#xff1a;npm config set registryhttps://registry.npm.taobao.org  2.查看npm命令列表 > $ npm help 二、搭建项目 1、全局安装vue脚手架工具 vue-cli npm install vue…

CSS-合理使用z-index控制盒子视轴高度,解决z-index失效

关于z-index我们的共识 共识一 首先&#xff0c;我们都同意&#xff0c;z-index对于普通盒子是无效的&#xff0c;这里的“普通盒子”是除了下文我会提到的“神奇盒子”外的所有盒子&#xff0c;至于什么是“神奇盒子”请慢慢看。 对于普通盒子&#xff0c;不管z-index值如何&…

Activiti6.0教程 Eclipse安装Activiti Diagram插件(一)

最近这段时间打算出一个Activiti6.0的详细教程&#xff0c;Activiti作为一个流行的开源工作流引擎&#xff0c;正在不断发展&#xff0c;其6.0版本以API形式提供服务&#xff0c;而之前版本基本都是要求我们的应用以JDK方式与其交互&#xff0c;只能将其携带到我们的应用中&…

JS性能优化之文档碎片-document.createDocumentFragment

讲这个方法之前&#xff0c;我们应该先了解下插入节点时浏览器会做什么。 在浏览器中&#xff0c;我们一旦把节点添加到document.body&#xff08;或者其他节点&#xff09;中&#xff0c;页面就会更新并反映出这个变化&#xff0c;对于少量的更新&#xff0c;一条条循…

左右滑动栏

展示效果图&#xff1a; 父 <template><div ref"topBox" class"swiper-in page-container bg-white"><div class"page-body"><drag-box class"drag-box"><div class"relative" :class"{ex…

Active MQ

转载于:https://www.cnblogs.com/ygl888/p/11020647.html

jQuery Ajax 实例

一、$.ajax的一般格式 $.ajax({ type: POST, url: url , data: data , success: success , dataType: dataType }); 二、$.ajax的参数描述 参数 描述 url 必需。规定把请求发送到哪个 URL。 data 可选。映射或字符串值。规定连同请求发送到服务器的数据。 success(data, textSt…

element ui封装 tree下拉框

展示&#xff1a; 子组件封装 <!-- 树状选择器 科室树形 --> <template><el-popoverref"popover"placement"bottom-start"trigger"click"show"onShowPopover"hide"onHidePopover"><el-treeref&quo…