jq取第一个子元素为select_jQuery表单元素选择器以及获取select元素选择器实例

最新推荐文章于 2024-07-26 03:31:08 发布
最新推荐文章于 2024-07-26 03:31:08 发布
阅读量669 收藏 1
点赞数
文章标签： jq取第一个子元素为select
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39932939/article/details/111730304
版权
本文详细介绍了jQuery如何操作select元素，包括获取和设置select选择的Text、Value、索引值，以及添加、删除Option项。同时讲解了jQuery选择器在表单元素中的应用，如input、text、checkbox、radio等。
摘要由CSDN通过智能技术生成

本文我们主要和大家分享jQuery表单元素选择器以及获取select元素选择器实例，希望能帮助到大家。

首先我们先学习一下jQuery获取select元素选择器的方法：

jQuery获取Select选择的Text和Value:

语法解释：1. $("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发

2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text

3. var checkValue=$("#select_id").val(); //获取Select选择的Value

4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值

5. var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值

jQuery设置Select选择的 Text和Value:

语法解释：1. $("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中

2. $("#select_id ").val(4); // 设置Select的Value值为4的项选中

3. $("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中

jQuery添加/删除Select的Option项：

语法解释：1. $("#select_id").append("Text"); //为Select追加一个Option(下拉项)

2. $("#select_id").prepend("请选择"); //为Select插入一个Option(第一个位置)

3. $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)

4. $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)

5. $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option

5. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option

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的项目为当前选中项

$("11112222").appendTo("#sel")//添加下拉框的option

$("#sel").empty()；//清空下拉框

//遍历option和添加、移除option

function changeShipMethod(shipping){

var len = $("select[name=ISHIPTYPE] option").length

if(shipping.value != "CA"){

$("select[name=ISHIPTYPE] option").each(function(){

if($(this).val() == 111){

$(this).remove();

}

});

}else{

$("UPS Ground").appendTo($("select[name=ISHIPTYPE]"));

}

}

//取得下拉选择的选取值

$(#testSelect option:selected').text();

或$("#testSelect").find('option:selected').text();

或$("#testSelect").val();

1,下拉框:var cc1 = $(".formc select[name='country'] option[selected]").text(); //得到下拉菜单的选中项的文本(注意中间有空格)

var cc2 = $('.formc select[name="country"]').val(); //得到下拉菜单的选中项的值

var cc3 = $('.formc select[name="country"]').attr("id"); //得到下拉菜单的选中项的ID属性值

$("#select").empty();//清空下拉框 //$("#select").html('');

$("1111").appendTo("#select")//添加下拉框的option

稍微解释一下:

1.select[name='country'] option[selected] 表示具有name 属性，

并 且该属性值为'country' 的select元素 里面的具有selected 属性的option 元素；

2,单选框:

$("input[@type=radio][@checked]").val(); //得到单选框的 选中项的值(注意中间没有空格)

$("input[@type=radio][@value=2]").attr("checked",'checked'); //设置单选框value=2的为选中状态.(注意中间没有空格)

3,复选框:

$("input[@type=checkbox][@checked]").val(); //得到复选框的选中的第一项的值

$("input[@type=checkbox][@checked]").each(function() { //由于复选框一般选中的是多个,所以可以循环输出

alert($(this).val());

});

$("#chk1").attr("checked",'');//不打勾

$("#chk2").attr("checked",true);// 打勾

if($("#chk1").attr('checked')==undefined){} //判断是否已经打勾

当然jquery的选择器是强大的. 还有很多方法.

$(document).ready(function(){

$("#selectTest").change(function()

{

//alert("Hello");

//alert($("#selectTest").attr("name"));

//$("a").attr("href","xx.html");

//window.location.href="xx.html";

//alert($("#selectTest").val());

alert($("#selectTest option[@selected]").text());

$("#selectTest").attr("value", "2");

});

});

aaass

11

22

33

44

55

66

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的项目为当前选中项

$("2222

$("#sel").empty()；// 清空下拉框

获取一组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的项目为当前选中项

$("11112222").appendTo("#sel")//添加下拉框的option

$("#sel").empty()；// 清空下拉框

复制代码

jQuery设置checkbox不选中：

$("input[type='checkbox']").each(function(){

if(this.checked){

this.checked=false;

}

});

接下来和大家介绍jQuery选择器之表单元素选择器的相关资料：

input{

display: block;

margin: 10px;

padding:10px;

}

子元素筛选选择器

input、text、password、radio、checkbox

submit、image、reset、button、file

//查找所有 input, textarea, select 和 button 元素

//:input 选择器基本上选择所有表单控件

$(":input").css("border", "1px groove red");

//匹配所有input元素中类型为text的input元素

$(":text").css("background", "#A2CD5A");

//匹配所有input元素中类型为password的input元素

$(":password").css("background", "yellow");

//匹配所有input元素中的单选按钮,并选中

$(":radio").attr('checked','true');

//匹配所有input元素中的复选按钮,并选中

$(":checkbox").attr('checked','true');

//匹配所有input元素中的提交的按钮,修改背景颜色

$(":submit").css("background", "#C6E2FF");

//匹配所有input元素中的图像类型的元素,修改背景颜色

$(":image").css("background", "#F4A460");

//匹配所有input元素中类型为按钮的元素

$(":button").css("background", "red");

//匹配所有input元素中类型为file的元素

$(":file").css("background", "#CD1076");

相关推荐：

weixin_39932939
关注
HTML表格区域选中列选中-Vue & ElementUI
季秀的博客
10-07 2688
HTML 元素（主要是文本）能否被选中，是由 user-select css 属性控制的，若设置为 none 则不可选中，更多属性值参考 MDN. HTML 页面的默认选中方式是行选择模式，即鼠标从按下到释放中间经过的所有行都会被选中。若要实现列选中模式或是任意选中模式，基本思路是：将表格所有单元格设置为不可选中，在鼠标经过时，将对应的单元格设置可选中，即可实现任意选择的模式。 以上思路有几点需要注意的： 浏览器适配：完整的设置不可选中的样式为: -webkit-user-select: none; -m
jq select 获取text_Jquery获取select选中的文本与值
weixin_39662578的博客
12-22 3077
jquery获取select选择的文本与值获取select ：获取select 选中的 text :$("#ddlregtype").find("option:selected").text();获取select选中的 value:$("#ddlregtype ").val();获取select选中的索引:$("#ddlregtype ").get(0).selectedindex;设置selec...
element tree-table 子选项选中父选项默认选中与全选
Polly
09-08 3124
element tree-table 子选项选中父选项默认选中与全选
jquery 获取下拉框值与select text
weixin_33810006的博客
08-28 111
2019独角兽企业重金招聘Python工程师标准>>> ...
jquery获得select选中项的text和value
liuhui_306的专栏
10-07 950
语法解释： 1. $("#select_id").change(function(){//code...});   //为Select添加事件，当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text 3. var checkValue=$("#select_i
jquery根据name取得select选中的值实例(超简单)
10-18
这行代码中，“select[name='region[province]']”是一个jQuery选择器，用来选取name属性为'region[province]'的select元素。紧接着使用.val()方法来获取该元素当前选中的option的value值。 这里需要注意的是，.val...
jquery+ajax实现直接提交表单实例分析
12-28
本文实例讲述了jquery+ajax实现直接提交表单的方法。分享给大家供大家参考，具体如下： 这里给出查看帮助文档的例子 [removed][removed] [removed] $(function(){ $(#results).append( <tt> + $(form).serialize()...
jquery操作select取值赋值与设置选中实例
10-20
在本文中，我们将深入探讨如何使用jQuery来处理`<select>`元素的取值、赋值以及设置选中状态，同时也将涵盖一些基本的JavaScript操作。 首先，我们来看如何使用jQuery设置和获取`<select>`的值。假设我们有这样一个...
jQuery（一）:概述、选择器、操作（元素本身、属性、内容、样式）、元素遍历、事件
m0_50134014的博客
10-24 339
jQuery对象 jQuery对象:JavaScript的工具库，对原生JavaScript中的DOM操作、事件处理、包括数据处理和Ajax技术等进行封装,提供更完善，更便捷的方法。 "$()"函数：用于获取元素节点，如$("h1")，创建元素节点或将原生JavaScript对象转换为jquery对象,返回 jQuery 对象 互相转换：原生对象转jquery对象：$(原生对象) jquery对象转原生对象：var div = $("div")[0]或var d
jQuery替换节点元素的操作方法
10-18
3. 如果要替换的元素是一个表单元素（如input、select等），并且新内容是一个完全不同的元素（例如从一个input元素替换到一个div元素），那么新元素不会拥有任何表单值。这是因为表单值是和表单元素紧密关联的。 ...
jQuery获取Select选择的Text和Value(详细汇总)
12-03
语法解释： 代码如下: 1. $(“#select_id”).change(function(){//code…}); //为Select添加事件，当选择其中一项时触发 2. var checkText=$(“#select_id”).find(“option:selected”).text(); //获取Select选择的Text 3. var checkValue=$(“#select_id”).val(); //获取Select选择的Value 4. var checkIndex=$(“#select_id “).get(0).selectedIndex; //获取Select选择的索
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
12-02
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
jQuery获取Select选择的Text和_Value
08-30
jQuery获取Select选择的Text和_Value
jquery 获取select选择的文本
最新发布
weixin_40400928的博客
07-26 445
jQuery 获取Select选择的文本 在Web开发中，我们经常需要通过JavaScript操作DOM元素，而jQuery作为一个流行的JavaScript库，提供了许多简化DOM操作的方法。本文将介绍如何使用jQuery获取select元素中选中的文本。 什么是Select元素？ select元素是一个HTML表单元素...
jQuery获取select控件中选中的文本
06-08 131
jQuery代码 $(function () { 　　$("#moveright").click(function () { 　　　　var items = $("#select1 option:selected").remove(); 　　　　$("#select2").append(items); ...
jQuery取得select选择的文本与值
摘取天上星
12-09 2649
jquery获取select选择的文本与值 获取select ： 获取select 选中的 text :     $("#ddlregtype").find("option:selected").text(); 获取select选中的 value:     $("#ddlregtype ").val(); 获取select选中的索引:     $("#ddlregtype
安装HBuilderX.2.6.1
qq_50936454的博客
10-24 381
** 安装HBuilderX.2.6.1 ** HBuilderX，定位是ide和编辑器的完美结合，HBuilderX会提供轻量且世界顶级的高效字处理能力。 为了记录和检验自己的学习过程，我选择在1024这一个特殊意义的一天开始写下自己的第一个博客——安装HBuilderX.2.6.1 1.先找到压缩包 2.双击进入压缩包，找到HBuilderX.exe这个应用程序双击进行安装 3.解压安装中，耐心等待安装完成 4.安装结束后有下图所示内容就是成功了，然后可以双击如图蓝色框内的HBuilderX.ex
jQuery获取Select选择的Text和Value:
SHUKEd的博客
05-08 2965
语法解释： 1. $("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3. var checkValue=$("#select_id").val(); //获取Select选择的Value 4. var checkIndex=$("#select...
jQuery CSS选择器完全指南
"这篇笔记主要介绍了jQuery中的CSS选择器，包括通用元素选择器、标签选择器、类选择器、ID选择器以及多种组合选择器的使用，并提供了实例代码以加深理解。笔记覆盖了CSS 2和CSS 3的大部分选择器规定。" 在jQuery中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值