jQuery form element selector and getting select element selector instance-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

jQuery form element selector and getting select element selector instance

小云云

Feb 05, 2018 pm 03:43 PM

jquerySelector

In this article, we mainly share with you the jQuery form element selector and get the select element selector instance. We hope it can help you.

First of all, let’s learn how jQuery gets the select element selector:

jQuery gets the Text and Value selected by Select:

Syntax explanation:

 
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 sets the Text and Value selected by Select:

Syntax explanation:

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

jQuery adds/delete the Option item of Select:

Grammar explanation:

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

jquery radio value, checkbox value, select value, radio selection, checkbox selection, select selection, and related

获 取一组radio被选中项的值
var item = $(&#39;input[name=items][checked]&#39;).val();
获 取select被选中项的文本
var item = $("select[name=items] option[selected]").text();
select下拉框的第二个元素为当前选中值
$(&#39;#select_id&#39;)[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值
$(&#39;input[name=items]&#39;).get(1).checked = true;
获取值：
文本框，文本区域：$("#txt").attr("value")；
多选框 checkbox：$("#checkbox_id").attr("value")；
单选组radio：   $("input[type=radio][checked]").val();
下拉框select： $(&#39;#sel&#39;).val();
控制表单元素：
文本框，文本区域：$("#txt").attr("value",&#39;&#39;);//清空内容
$("#txt").attr("value",&#39;11&#39;);//填充内容
多选框checkbox： $("#chk1").attr("checked",&#39;&#39;);//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr(&#39;checked&#39;)==undefined) //判断是否已经打勾
单选组 radio：    $("input[type=radio]").attr("checked",&#39;2&#39;);//设置value=2的项目为当前选中项
下拉框 select：   $("#sel").attr("value",&#39;-sel3&#39;);//设置value=-sel3的项目为当前选中项
$("<option value=&#39;1&#39;>1111</option><option value=&#39;2&#39;>2222</option>").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{
$("<option value=&#39;111&#39;>UPS Ground</option>").appendTo($("select[name=ISHIPTYPE]"));
}
}
//取得下拉选择的选取值
$(#testSelect option:selected&#39;).text();
或$("#testSelect").find(&#39;option:selected&#39;).text();
或$("#testSelect").val();

1, Drop-down box:

 
var cc1 = $(".formc select[name=&#39;country&#39;] option[selected]").text(); //得到下拉菜单的选中项的文本(注意中间有空格)
var cc2 = $(&#39;.formc select[name="country"]&#39;).val(); //得到下拉菜单的选中项的值
var cc3 = $(&#39;.formc select[name="country"]&#39;).attr("id"); //得到下拉菜单的选中项的ID属性值
$("#select").empty();//清空下拉框 //$("#select").html(&#39;&#39;);
$("<option value=&#39;1&#39;>1111</option>").appendTo("#select")//添加下拉框的option
稍微解释一下:
1.select[name=&#39;country&#39;] option[selected] 表示具有name 属性，
并 且该属性值为&#39;country&#39; 的select元素 里面的具有selected 属性的option 元素；
 
2,单选框:
$("input[@type=radio][@checked]").val(); //得到单选框的 选中项的值(注意中间没有空格)
$("input[@type=radio][@value=2]").attr("checked",&#39;checked&#39;); //设置单选框value=2的为选中状态.(注意中间没有空格)
 
3,复选框:
$("input[@type=checkbox][@checked]").val(); //得到复选框的选中的第一项的值
$("input[@type=checkbox][@checked]").each(function() { //由于复选框一般选中的是多个,所以可以循环输出
alert($(this).val());
});
 
$("#chk1").attr("checked",&#39;&#39;);//不打勾
$("#chk2").attr("checked",true);// 打勾
if($("#chk1").attr(&#39;checked&#39;)==undefined){} //判断是否已经打勾
 
当然jquery的选择器是强大的. 还有很多方法.
 
<script src="jquery-1.2.1.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(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");
 
});
});
</script>
 
<a href="#">aaass</a>
 
<!--下拉框-->
<select id="selectTest" name="selectTest">
<option value="1">11</option>
<option value="2">22</option>
<option value="3">33</option>
<option value="4">44</option>
<option value="5">55</option>
<option value="6">66</option>
</select>
jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关获取一组radio被选中 项的值
var item = $(&#39;input[@name=items][@checked]&#39;).val();
获取select被选 中项的文本
var item = $("select[@name=items] option[@selected]").text();
select 下拉框的第二个元素为当前选中值
$(&#39;#select_id&#39;)[0].selectedIndex = 1;
radio单选组的第二个 元素为当前选中值
$(&#39;input[@name=items]&#39;).get(1).checked = true;
获取值：
文本 框，文本区域：$("#txt").attr("value")；
多选框 checkbox：$("#checkbox_id").attr("value")；
单选组radio： $("input[@type=radio][@checked]").val();
下拉框select： $(&#39;#sel&#39;).val();
控 制表单元素：
文本框，文本区域：$("#txt").attr("value",&#39;&#39;);//清空内容
$("#txt").attr("value",&#39;11&#39;);// 填充内容
多选框checkbox： $("#chk1").attr("checked",&#39;&#39;);//不打勾
$("#chk2").attr("checked",true);// 打勾
if($("#chk1").attr(&#39;checked&#39;)==undefined) //判断是否已经打勾
单选组radio： $("input[@type=radio]").attr("checked",&#39;2&#39;);//设置value=2的项目为当前选中项
下拉框 select： $("#sel").attr("value",&#39;-sel3&#39;);//设置value=-sel3的项目为当前选中项
$("<optionvalue=&#39;1&#39;& gt;1111</option><optionvalue=&#39;2&#39;>2222</option& gt;").appendTo("#sel")//添加下拉框的option
$("#sel").empty()；// 清空下拉框
 
获取一组radio被选中项的值
var item = $(&#39;input[@name=items][@checked]&#39;).val();
获取select被选中项的文本
var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二个元素为当 前选中值
$(&#39;#select_id&#39;)[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值
$(&#39;input[@name=items]&#39;).get(1).checked = true;
获取值：
文本框，文本区域：$("#txt").attr("value")；
多选框 checkbox：$("#checkbox_id").attr("value")；
单选组radio： $("input[@type=radio][@checked]").val();
下拉框select： $(&#39;#sel&#39;).val();
控 制表单元素：
文本框，文本区域：$("#txt").attr("value",&#39;&#39;);//清空内容
$("#txt").attr("value",&#39;11&#39;);// 填充内容
多选框checkbox： $("#chk1").attr("checked",&#39;&#39;);//不打勾
$("#chk2").attr("checked",true);// 打勾
if($("#chk1").attr(&#39;checked&#39;)==undefined) //判断是否已经打勾
单选组radio： $("input[@type=radio]").attr("checked",&#39;2&#39;);//设置value=2的项目为当前选中项
下拉框 select： $("#sel").attr("value",&#39;-sel3&#39;);//设置value=-sel3的项目为当前选中项
$("<option value=&#39;1&#39;>1111</option><option value=&#39;2&#39;>2222</option>").appendTo("#sel")//添加下拉框的option
$("#sel").empty()；// 清空下拉框
 
复制代码
 
jQuery设置checkbox不选中：
 
$("input[type=&#39;checkbox&#39;]").each(function(){
if(this.checked){
this.checked=false;
}
});

Next, I will introduce to you the relevant information of jQuery selector form element selector:

jQuery form element selector and getting select element selector instance

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title></title>
  <link rel="stylesheet" href="imooc.css" rel="external nofollow" type="text/css">
  <style> 
    input{
      display: block;
      margin: 10px;
      padding:10px;
    }
  </style>
  <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
  <h2 id="子元素筛选选择器">子元素筛选选择器</h2>
  <h3 id="input-text-password-radio-checkbox">input、text、password、radio、checkbox</h3>
  <h3 id="submit-image-reset-button-file">submit、image、reset、button、file</h3>
  <p class="left first-p">
    <form>
      <input type="text" value="text类型"/>
      <input type="password" value="password"/>
      <input type="radio"/> 
      <input type="checkbox"/>
      <input type="submit" />
      <input type="image" />
      <input type="reset" />
      <input type="button" value="Button" />
      <input type="file" />
    </form>
  </p>

  <script type="text/javascript">
    //查找所有 input, textarea, select 和 button 元素
    //:input 选择器基本上选择所有表单控件
    $(":input").css("border", "1px groove red"); 
  </script>

  <script type="text/javascript">
    //匹配所有input元素中类型为text的input元素
    $(":text").css("background", "#A2CD5A");
  </script>

  <script type="text/javascript">
    //匹配所有input元素中类型为password的input元素
    $(":password").css("background", "yellow");
  </script>

  <script type="text/javascript">
    //匹配所有input元素中的单选按钮,并选中
    $(":radio").attr(&#39;checked&#39;,&#39;true&#39;);
  </script>

  <script type="text/javascript">
    //匹配所有input元素中的复选按钮,并选中
    $(":checkbox").attr(&#39;checked&#39;,&#39;true&#39;); 
  </script>

  <script type="text/javascript">
    //匹配所有input元素中的提交的按钮,修改背景颜色
    $(":submit").css("background", "#C6E2FF");
  </script>

  <script type="text/javascript">
    //匹配所有input元素中的图像类型的元素,修改背景颜色
    $(":image").css("background", "#F4A460");
  </script>

  <script type="text/javascript">
    //匹配所有input元素中类型为按钮的元素
    $(":button").css("background", "red");
  </script>

  <script type="text/javascript">
    //匹配所有input元素中类型为file的元素
    $(":file").css("background", "#CD1076");
  </script>

</body>

</html>

jQuery form element selector and getting select element selector instance

Related recommendations:

Detailed introduction to the sample code sharing of Javascript encapsulation id, class and element selector

Detailed introduction to the usage of CSS sub-element selectors

Some techniques for using pseudo-classes, pseudo-elements and adjacent element selectors in CSS

The above is the detailed content of jQuery form element selector and getting select element selector instance. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

JavaScript Engines: Comparing ImplementationsApr 13, 2025 am 12:05 AM

Different JavaScript engines have different effects when parsing and executing JavaScript code, because the implementation principles and optimization strategies of each engine differ. 1. Lexical analysis: convert source code into lexical unit. 2. Grammar analysis: Generate an abstract syntax tree. 3. Optimization and compilation: Generate machine code through the JIT compiler. 4. Execute: Run the machine code. V8 engine optimizes through instant compilation and hidden class, SpiderMonkey uses a type inference system, resulting in different performance performance on the same code.

Beyond the Browser: JavaScript in the Real WorldApr 12, 2025 am 12:06 AM

JavaScript's applications in the real world include server-side programming, mobile application development and Internet of Things control: 1. Server-side programming is realized through Node.js, suitable for high concurrent request processing. 2. Mobile application development is carried out through ReactNative and supports cross-platform deployment. 3. Used for IoT device control through Johnny-Five library, suitable for hardware interaction.

Building a Multi-Tenant SaaS Application with Next.js (Backend Integration)Apr 11, 2025 am 08:23 AM

I built a functional multi-tenant SaaS application (an EdTech app) with your everyday tech tool and you can do the same. First, what’s a multi-tenant SaaS application? Multi-tenant SaaS applications let you serve multiple customers from a sing

How to Build a Multi-Tenant SaaS Application with Next.js (Frontend Integration)Apr 11, 2025 am 08:22 AM

This article demonstrates frontend integration with a backend secured by Permit, building a functional EdTech SaaS application using Next.js. The frontend fetches user permissions to control UI visibility and ensures API requests adhere to role-base

JavaScript: Exploring the Versatility of a Web LanguageApr 11, 2025 am 12:01 AM

JavaScript is the core language of modern web development and is widely used for its diversity and flexibility. 1) Front-end development: build dynamic web pages and single-page applications through DOM operations and modern frameworks (such as React, Vue.js, Angular). 2) Server-side development: Node.js uses a non-blocking I/O model to handle high concurrency and real-time applications. 3) Mobile and desktop application development: cross-platform development is realized through ReactNative and Electron to improve development efficiency.

The Evolution of JavaScript: Current Trends and Future ProspectsApr 10, 2025 am 09:33 AM

The latest trends in JavaScript include the rise of TypeScript, the popularity of modern frameworks and libraries, and the application of WebAssembly. Future prospects cover more powerful type systems, the development of server-side JavaScript, the expansion of artificial intelligence and machine learning, and the potential of IoT and edge computing.

Demystifying JavaScript: What It Does and Why It MattersApr 09, 2025 am 12:07 AM

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

Is Python or JavaScript better?Apr 06, 2025 am 12:14 AM

Python is more suitable for data science and machine learning, while JavaScript is more suitable for front-end and full-stack development. 1. Python is known for its concise syntax and rich library ecosystem, and is suitable for data analysis and web development. 2. JavaScript is the core of front-end development. Node.js supports server-side programming and is suitable for full-stack development.

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks agoByDDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: How To Unlock Everything In MyRise

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

Zend Studio 13.0.1

Powerful PHP integrated development environment

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

Dreamweaver CS6

Visual web development tools

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

Hot Topics

Where is the login entrance for gmail email?

7488

CakePHP Tutorial

1377

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers