`
ZhengMingwei
  • 浏览: 136681 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery 下拉列表

    博客分类:
  • js
阅读更多

记性不好的可以收藏下:
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下拉列表特效

    《jQuery下拉列表特效详解与应用》 在Web开发中,下拉列表(Dropdown List)是一种常见的交互元素,用于提供用户选择多个选项的功能。jQuery,作为一款强大的JavaScript库,为开发者提供了丰富的API和插件,使得...

    jQuery下拉列表框双向选择

    而“jQuery下拉列表框双向选择”则涉及到一种交互设计,允许用户在一个下拉列表中选择项,并同时将这些选择同步到另一个相关的下拉列表中,实现数据的双向同步。 要实现这样的功能,我们需要理解以下几个关键知识点...

    mcdropdown好用的JQuery下拉列表

    **jQuery下拉列表插件——mcdropdown** 在网页开发中,下拉列表是一种常见的交互元素,用于在有限的空间内展示大量的选项。`mcdropdown`是一款基于jQuery的插件,它为传统的HTML `&lt;select&gt;`元素提供了丰富的自定义...

    jquery下拉列表插件

    而“jQuery下拉列表插件”就是利用jQuery来增强HTML原生的`&lt;select&gt;`元素,提供更丰富的交互性和自定义样式。这个插件名为“selectBox”,它旨在模仿并扩展下拉列表的功能,为用户带来更好的使用体验。 首先,原生...

    jQuery下拉列表框日期选择代码

    在"jQuery下拉列表框日期选择代码"这个场景中,jQuery将用于响应用户的交互,如点击input框,以及控制日期时间选择器的显示和隐藏。 接下来,我们需要创建一个HTML结构,通常包含一个input元素,作为用户触发日期...

    jquery下拉列表树

    《jQuery下拉列表树详解及应用》 在Web开发中,下拉列表是常见的交互元素,用于提供用户选择项的菜单。然而,传统的下拉列表往往只能展示一级选项,对于层级结构复杂的数据,如部门结构、地区分类等,就显得...

    jQuery下拉列表插件 jQselectable

    jQuery下拉列表插件jQselectable是一款由日本开发者创建的高效工具,旨在为网页中的下拉选择元素提供丰富的交互性和美观的样式。这款插件是基于广泛使用的JavaScript库jQuery构建的,它允许开发者轻松地扩展标准...

    jquery下拉列表树插件代码.zip

    在本文中,我们将深入探讨jQuery下拉列表树插件代码,这是一种用于构建树形结构的下拉选择框的实用工具。这种插件广泛应用于网页设计中,为用户提供更直观、更易于操作的选择体验,尤其在处理层级关系数据时非常有用...

    jQuery下拉列表插件SweetDropdown

    《jQuery下拉列表插件SweetDropdown深度解析》 在网页开发中,下拉列表和提示框是常见的交互元素,它们可以提升用户体验,使用户能够快速访问或操作信息。jQuery下拉列表插件SweetDropdown就是这样一个工具,它为...

    jQuery下拉列表插件.zip

    jQuery下拉列表插件是一种基于JavaScript库jQuery的交互式组件,它极大地丰富了网页的用户界面体验。在网页设计中,下拉列表是常见的交互元素,用于提供多种选择,而SweetDropdown则是对这一功能的扩展和增强。这款...

    jQuery下拉列表插件SweetDropdown.zip

    《jQuery下拉列表插件SweetDropdown深度解析》 在网页开发中,下拉列表是常见的交互元素,用于提供多选项供用户选择。jQuery作为一款强大的JavaScript库,为开发者提供了丰富的功能,包括对下拉列表的美化和扩展。...

    jQuery下拉列表select美化插件jQselectable

    jQuery下拉列表select美化插件jQselectable jQuery下拉列表select美化插件jQselectable jQuery下拉列表select美化插件jQselectable jQuery下拉列表select美化插件jQselectable

    jQuery下拉列表复选框

    首先,我们来看一下标题"jQuery下拉列表复选框"所涉及的核心知识点。这里主要包含两部分:jQuery的使用和创建自定义的下拉复选框功能。jQuery提供了丰富的API,如`.each()`用于遍历元素,`.on()`用于绑定事件,`....

    jQuery下拉列表框日期选择代码.zip

    《jQuery下拉列表框日期选择代码详解》 在网页开发中,用户界面的交互性和易用性至关重要。jQuery,作为一款强大的JavaScript库,为开发者提供了丰富的功能和便捷的API,使得实现复杂的交互效果变得轻而易举。本篇...

    jQuery下拉列表插件jQselectable.zip

    总之,jQuery下拉列表插件jQselectable是一个实用的工具,它能够帮助开发者快速创建具有吸引力和功能性的下拉列表,提升网站的用户体验。通过熟练掌握其API和配置选项,你可以轻松地在项目中实现各种定制化的下拉...

    jquery下拉列表插件(jQuery Simple Drop-Down Menu Plugin)

    jquery下拉列表插件(jQuery Simple Drop-Down Menu Plugin),demo点击:http://blog.csdn.net/shellwin/archive/2010/07/05/5714455.aspx

    jQuery下拉列表之应用于移动端选择银行特效源码.zip

    本资源“jQuery下拉列表之应用于移动端选择银行特效源码.zip”正是针对这一需求,提供了一种在移动端实现下拉列表选择银行的特效解决方案。 首先,jQuery的下拉列表(Dropdown)是一种常见的用户界面元素,用于展示...

    实现多选和搜索过滤功能的jQuery下拉列表框插件

    **jQuery下拉列表框插件:Selectator** 在网页开发中,传统的HTML下拉列表框(`&lt;select&gt;`元素)往往不能满足复杂交互的需求,比如多选和搜索过滤功能。为了解决这个问题,开发者通常会借助于jQuery这样的JavaScript...

    jquery简单实现级联下拉列表

    本文将详细解析如何使用jQuery来实现级联下拉列表,这是一种常见的Web前端功能,常用于数据关联选择场景,如地区选择(省市区)、分类选择等。 ### 核心概念:级联下拉列表 级联下拉列表是指当用户在一个下拉列表...

Global site tag (gtag.js) - Google Analytics