`

jQuery对select操作总结

阅读更多
//遍历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='111'>UPS Ground</option>").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('');
$("<option value='1'>1111</option>").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的选择器是强大的. 还有很多方法.

<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 = $('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的项目为当前选中项
            $("<optionvalue='1'>1111</option><optionvalue='2'> 2222</option>").appendTo("#sel")//添加下拉框的option
            $("#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的项目为当前选中项
$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option
$("#sel").empty();//清空下拉框
分享到:
评论

相关推荐

    浅析jQuery对select操作小结(遍历option,操作option)

    本篇文章是关于jQuery对select的操作进行了总结介绍,需要的朋友可以参考下

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

    每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了。 比如&lt;select class=”selector”&gt;&lt;/select&gt; 1、设置value为pxx的项选中  $(“.selector”).val(“pxx”); 2、设置...

    jquery操作select常见方法大全【7种情况】

    主要介绍了jquery操作select常见方法,结合实例形式总结分析了jQuery操作select常见的7种情况与相关操作技巧,需要的朋友可以参考下

    jquery控制select的text/value值为选中状态

    每一次操作select的时候,总是要在网上翻下,太繁琐了,自己在这里总结下。 比如&lt;select class=”selector”&gt;&lt;/select&gt; 1、设置value为“全部“的项选中 代码如下: $(“.selector”).val(“全部”); 2、...

    JQuery对表单元素的基本操作使用总结

    select下拉列表onChange事件之JQuery实现: JQuery: $(document).ready(function () { $(#selectMenu).bind(change, function () { if ($(this).val() == pro1) { $(#pro1).slideDown(); $(#pro2).slideUp(); } ...

    JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结

    在使用 JQuery 进行遍历操作时, $(“input”).each(function(i) { …… } 当操作对象的类型为 dropdownlist时:(备注:在firefox下DropDownList的类型为”select-one”) 获得所选中的值: $(this).val();...

    Jquery 常用方法经典总结

    注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象。 普通的dom对象一般可以通过$()转换成jquery对象。 如:$(document.getElementById(“msg”))则为jquery对象,可以使用jquery...

    jQuery操作input值的各种方法总结

    获取select被选中项的文本 代码如下:var item = $(“select[@name=items] option[@selected]”).text();select下拉框的第二个元素为当前选中值 代码如下:$(‘#select_id’)[0].selectedIndex = 1;radio单选组的第二...

    jQuery 常见开发使用技巧总结

    注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象。 普通的dom对象一般可以通过$()转换成jquery对象。 如:$(document.getElementById(“msg”))则为jquery对象,可以使用jquery...

    Js操作Select大全(取值、设置选中等等)

    jquery操作select(取值,设置选中) 每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了。 比如&lt;select class=”selector”&gt;&lt;/select&gt; 1、设置value为pxx的项选中 $(“....

    jQuery操作表单常用控件方法小结

    本文实例总结了jQuery操作表单常用控件方法。分享给大家供大家参考。具体如下: 下面的JS代码列出了jQuery操作表单常用控件(包括select,radiobox,checkbox)的常用方法,相信一定有你需要的 操作radio的html代码 ...

    jquery的checkbox,radio,select等方法小结

    jquery的checkbox,radio,和select是jquery操作的一个难点和重点,很多前端新手对其了解不是很透彻。时间久了不用,我在写的时候有时也难免对某些操作支支吾吾,记不清楚,现在,对其做一些简单的总结

    最新Python3.5零基础+高级+完整项目(28周全)培训视频学习资料

    一对多块表操作的的三种方式 增加一对多数据示例 初识Ajax Ajax内容基本整理 编辑一对多示例 创建多对多以及增加示例 本节内容梳理 本周作业 第21周 今日知识点概要 上节内容回顾以及URL的补充 视图获取用户请求...

    jQuery Html控件基本操作(日常收集整理)

    闲来无聊,收集总结一下jQuery常用操作,希望对新手有用。 基于jquery 1.3.2 &lt;!--[removed][removed]--&gt; &lt;!--[removed][removed]--&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jquer

    python入门到高级全栈工程师培训 第3期 附课件代码

    python入门到高级全栈工程师培训视频学习资料;本资料仅用于学习,请查看后24小时之内删除。 【课程内容】 第1章 01 计算机发展史 02 计算机系统 03 小结 04 数据的概念 ...16 Model操作之select_related以及...

    图库新版jQuery焦点图 JS代码

    tips[36] = '所谓“网站定位”就是实事求是的基于各种现状总结出一个对内容建设、功能规划、服务运营有帮助的指导纲领。'; tips[37] = '不要相信“天下设计一大抄”我们可以借鉴,但绝不能抄袭!'; tips[38] = '学...

    精通AngularJS part1

    jQuery与AngularJS39 苹果与橙子40 窥视未来41 14总结41 第2章构建与测试43 21介绍示例应用44 熟悉问题领域44 技术栈45 持久化存储46 MongoLab46 服务器端环境47 第三方JavaScript库48 BootstrapCSS48 ...

    Java学习笔记-个人整理的

    {1.3.1}总结}{23}{subsection.1.3.1} {1.4}数据类型}{23}{section.1.4} {1.4.1}整数与浮点数}{23}{subsection.1.4.1} {1.4.1.1}浮点数原理}{24}{subsubsection.1.4.1.1} {1.4.2}格式化输出浮点数}{24}{...

    JEECG快速开发平台 v4.0

    技术点十三:数据权限(精细化数据权限控制,控制到行级,列表级,表单字段级,实现不同人看不同数据,不同人对同一个页面操作不同字段) 技术点十四:国际化(支持多语言,国际化的封装为多语言做了便捷支持) 技术...

    JEECG快速开发平台-其他

    控制到行级,列表级,表单字段级,实现不同人看不同数据,不同人对同一个页面操作不同字段)技术点十四:国际化(支持多语言,国际化的封装为多语言做了便捷支持)技术点十五:多数据源(在线配置数据源,数据源工作...

Global site tag (gtag.js) - Google Analytics