关于jQuery中select的全部

最新推荐文章于 2024-05-03 13:26:42 发布
最新推荐文章于 2024-05-03 13:26:42 发布
阅读量833 收藏
点赞数
分类专栏： Javascript 文章标签： jquery class button function insert border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lampsunny/article/details/7372259
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>jQuery-Select-Test</title>
<script src="http://media.pec365.com/rainnoless/javascript/jquery-1.3.2.min.js" type="text/javascript"></script>
<style type="text/css">
.div
{
width:95%;
margin-left:15px;
margin-top:15px;
margin-right:15px;
padding-left:5px;
padding-top:5px;
padding-bottom:5px;
background-color:#ccc;
border:#999 1px solid;
line-height:30px;
font-size:13px;
font-family:微软雅黑;
}
.blue{color:Blue;}
.green{color:Green;}
.button{border:green 1px solid;width:230px;}
</style>
</head>
<body>
<div class="div">
jQuery获取Select选择的Text和Value:<br />
<select id="slc1" >
<option value="0">请选择</option>
<option value="1">C#</option>
<option value="2">Javascript</option>
<option value="3">jQuery</option>
<option value="4">C++</option>
<option value="5">Java</option>
<option value="6">VB</option>
</select>&nbsp;
选择一项试试看<br />
<script type="text/javascript">
$("#slc1").change(function(){
var checkText=$("#slc1").find("option:selected").text();
var checkValue=$("#slc1").val();
var checkIndex=$("#slc1 ").get(0).selectedIndex;
var maxIndex=$("#slc1 option:last").attr("index");
alert('您选择的Text是： '+checkText+"\r\n"+"您选择的Value是： "+checkValue+"\r\n您选择的索引值是： "+checkIndex+"\r\n最大索引值是： "+maxIndex);
});
</script>
语法解释：<br />
1. $("#select_id").change(function(){//code...}); &nbsp;&nbsp;<span class="green">//为Select添加事件，当选择其中一项时触发</span><br />
2. var checkText=$("#select_id").find("option:selected").text();&nbsp;&nbsp;<span class="green">//获取Select选择的Text</span><br />
3. var checkValue=$("#select_id").val();&nbsp;&nbsp;<span class="green">//获取Select选择的Value</span><br />
4. var checkIndex=$("#select_id ").get(0).selectedIndex;&nbsp;&nbsp;<span class="green">//获取Select选择的索引值</span><br />
5. var maxIndex=$("#select_id option:last").attr("index");&nbsp;&nbsp;<span class="green">//获取Select最大的索引值</span>
<br />
jQuery设置Select选择的Text和Value:<br />
<input type="button" id="btn_index" class="button" value="设置Select索引值为1的项选中" />
<br />
<input type="button" id="btn_text" class="button" value="设置Select的Text值为jQuery的项选中" />
<br />
<input type="button" id="btn_value" class="button" value="设置Select的Value值为4的项选中" />
<br />
语法解释：<br />
1. $("#select_id ").get(0).selectedIndex=1;&nbsp;&nbsp;<span class="green">//设置Select索引值为1的项选中</span><br />
2. $("#select_id ").val(4); &nbsp;&nbsp;<span class="green">//设置Select的Value值为4的项选中</span><br />
3. $("#select_id option[text='jQuery']").attr("selected", true); &nbsp;&nbsp;<span class="green">//设置Select的Text值为jQuery的项选中</span><br />
<script type="text/javascript">
$("#btn_index").click(function(){
$("#slc1 ").get(0).selectedIndex=1;  
});
$("#btn_value").click(function(){
$("#slc1 ").val(4);  
});
$("#btn_text").click(function(){
$("#slc1 option[text='jQuery']").attr("selected", true);
});
</script>
</div>

<div class="div">
jQuery添加/删除Select的Option项：<br />
<select id="slc2">
</select><br />
<input type="button" class="button" id="btn_add" value="追加Option项" />&nbsp;点击一次，Select将追加一个Option<br />
<input type="button" class="button" id="btn_insert_first" value="插入Option项" />&nbsp;点击将在Select第一个位置插入一个Option<br />
<input type="button" class="button" id="btn_del" value="删除Option项" />&nbsp;点击将删除Select中索引值最大Option(最后一个)<br />

<script type="text/javascript">
var i=1;
var bI=false;
$("#btn_add").click(function(){
$("#slc2").append("<option value='"+i+"'>"+i+"</option>");
i++;
});
$("#btn_insert_first").click(function(){
if (!bI)
{
$("#slc2").prepend("<option value='0'>请选择</option>");
bI=true;
}
});
$("#btn_del").click(function(){
$("#slc2 option:last").remove();
});
</script>
语法解释：<br />
1. $("#select_id").append("&lt;option value='Value'>Text&lt;/option>");&nbsp;&nbsp;<span class="green">//为Select追加一个Option(下拉项)</span><br />
2. $("#select_id").prepend("&lt;option value='0'>请选择&lt;/option>");&nbsp;&nbsp;<span class="green">//为Select插入一个Option(第一个位置)</span><br />
3. $("#select_id option:last").remove();&nbsp;&nbsp;<span class="green">//删除Select中索引值最大Option(最后一个)</span><br />
4. $("#select_id option[index='0']").remove();&nbsp;&nbsp;<span class="green">//删除Select中索引值为0的Option(第一个)</span><br />
5. $("#select_id option[value='3']").remove();&nbsp;&nbsp;<span class="green">//删除Select中Value='3'的Option</span><br />
5. $("#select_id option[text='4']").remove();&nbsp;&nbsp;<span class="green">//删除Select中Text='4'的Option</span><br />
</div>
<br />

</body>
</html>
lampsunny
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
pieces
03-08
@ chessire /件 React棋子组件 通过下载和转换可以自动生成单个。 特征 一致且中性的外观 可定制的尺寸和颜色 与IE11，现代浏览器和Node.js（用于服务器端渲染）兼容。 内置Typescript类型定义 所有SVG属性和ref属性都转发到<svg>元素 演示版 安装及使用 $ npm install @chessire/pieces import { Piece } from "@chessire/pieces" ; // Default import also works export const BlackKnight = ( ) => < Piece xss=removed xss=removed xss=removed> ; 特性 /** Piece color */ color: "white" | "black" ; /**
pieces of js codes
zycbob
03-05 129
jQuery [code="java"] $('#demo')['click'](function(){ ... }); // equals to $('#demo').click(function(){ ... }); [/code] ------------ [code="html"][/code] [code="html"] 选择报告 ...
species-in-pieces网站动效的JS实现
weixin_33852020的博客
04-17 608
难度系数：普通关键词：GSAP SVG 前言 看到species网站做的很炫，想要借鉴，发现主要是用css3的clip-path实现的，兼容不好，因此想着用js实现下。下面作简单介绍，需要详细代码见github库。 基础知识 SVG基本知识，重点viewBox，polygon； GSAP动画平台，重点TimelineMax，Tween...
Pieces:有用的标记代码片段
07-14
件 包含自定义复选框、收音机和 sass 设置。
js碎片化图片轮播切换特效
12-11
这是一款效果非常炫酷的js碎片化图片轮播切换特效。该轮播图在pieces.js插件（一个图片切片效果插件）的基础上，实现的js碎片化图片轮播效果。
jQuery取得select选中的值
热门推荐
syq8023的博客
06-20 8万+
jQuery取得select选中的值 本来以为jQuery("#select1").val();是取得选中的值， 那么jQuery("#select1").text();就是取得的文本。 这是不正确的，正确做法是： jQuery("#select1 option:selected").text(); jQuery取得select选择的文本与值 jquery获取select选择...
Jquery 移除 select option
跳动的石头
03-01 2415
&lt;select id = "type" name="type"&gt; &lt;option value=""&gt;&lt;/option&gt; &lt;/select&gt; 1.移除 select 下的 option 以 id $("#type").html(""); $("#type").fi
jquery怎么获取select的值
最新发布
m0_65659549的博客
05-03 2251
记得在实际的 HTML 页面中包含 jQuery 库，否则上述代码将不会工作。元素的值可以通过几种不同的方式实现，具体取决于你想要获取的是选中的。或者其他 jQuery 选择器来定位元素。元素的实际 ID 或者类名。元素没有 ID，你可以使用类名。在 jQuery 中，获取。
jquery 获取 select 的值
weixin_35751412的博客
01-02 6213
jQuery 中可以使用 val() 方法来获取 select 元素的值。例如： // 获取 id 为 'mySelect' 的 select 元素的值 var selectedValue = $('#mySelect').val(); 注意，如果 select 元素有多个选项被选中，val() 方法只会返回第一个选中的选项的值。如果想要获取所有选中的选项的值，可以使用 :selected 伪类...
jQuery获取select onChange的值
p15097962069的博客
04-12 2608
I was under the impression that I could get the value of a select input by doing this $(this).val()
关于jquery中动态增加select,事件无效的快速解决方法
10-21
在jQuery中，动态添加元素并为其绑定事件是一个常见的需求，特别是在构建交互丰富的Web应用时。然而，有时我们可能会遇到一个问题，即使用`bind`方法为动态添加的`select`元素绑定事件时，这些事件并未生效。这是...
jQuery中的select操作详解
01-19
下面给大介绍了jquery对select的操作介绍，非常不错，具有内容介绍如下所示： select的html标签如下： <select class=xxx id=yyy><option></option>...<option></option></select> 1.设置value为“lll...
jquery遍历select元素(实例讲解)
12-12
本篇文章提供一款jquery遍历select教程代码，主要是利用了$(“#<%=ddl_xreg_id.clientid%> option”).each(function() {形式来each遍历一次，这样所有的select就给查询了一次。 代码如下:[removed][removed]...
jquery Ajax实现Select动态添加数据
10-19
在Ajax请求成功后，服务器返回的JSON数据会被解析并用于创建新的Option元素，这些元素随后会被添加到车型Select中。如果需要保持用户之前的选择，可以通过`_LastModelId`变量来判断并设置默认选中项。 最后，我们...
下拉框插件jquery.select.js
06-01
《jQuery自定义select下拉框样式插件jquery.select.js详解》 在网页设计中，下拉框（Select）是常用的一种交互元素，用于提供多个选项供用户选择。然而，原生的HTML `<select>` 元素样式单一，无法满足设计师们对于...
通过jQuery获取Select选中的值或文本
猿小白的博客
04-10 1万+
如何使用jQuery获取Select元素选中的值或文本呢？本篇文章给出相应的解决方法 目录 第一步、引入jQuery 第二步、编写一个Select案例 第三步、编写获取select选中的值或文本 第一步、引入jQuery 这里使用的是BootCDN中的地址，也可以使用自己本地引用的地址 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 第二步.
JQuery插件Select2详解
xinliucs的博客
08-23 9160
JQuery插件Select2详解 Select2是一款JQuery的下拉表插件，主要用来优化select，支持单选和多选，同时也支持分组显示、列表检索、远程获取数据等功能。 配置CSS/JS文件 在项目里直接引入CDN的地址就可以了 <!-- 加载 Jquery --> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <!-- 加载 Select2 --> <li
jQuery设置select的选中值
一万年太久，只争朝夕
09-19 8006
比如 <select id="testSelect"></select> 设置 value 为 test 的项选中 $("#testSelect").val("test"); 设置 text 为 test 的项选中 $("#testSelect").find("option[text='test']").attr("selected", true); example 1 <html> <head> <script src="https
jquery中select
09-04
jQuery中的select是用于处理HTML页面中的下拉选择框（select）元素的相关操作和事件。通过jQuery可以方便地获取选择框的值、选中项、添加选项、移除选项等操作。以下是一些常见的使用示例： 1. 获取选择框的值： ``...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值