`

JQuery控制下拉列表

阅读更多
//遍历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多级下拉菜单支持多级下拉列表菜单.zip

    这个名为"jQuery多级下拉菜单支持多级下拉列表菜单"的资源,就是专门为商城网站或企业网站设计的一种实现方式。 jQuery多级下拉菜单的核心在于利用CSS样式定义菜单结构,然后通过jQuery的事件监听和DOM操作来控制...

    JQuery关于下拉列表的操作

    ### JQuery关于下拉列表的操作 在Web开发中,下拉列表是用户界面中常见的交互元素之一,用于提供一系列选项供用户选择。通过JQuery库,我们可以轻松地与这些下拉列表进行交互,实现诸如获取选中值、设置选中项等...

    jquery下拉列表

    3. 使用jQuery控制下拉列表: 我们可以使用jQuery选择器选取元素,并绑定事件处理函数。例如,监听下拉列表的改变事件: ```javascript $('#dropdown').on('change', function() { var selectedOption = $(this)...

    jquery自定义下拉列表.zip

    本项目“jquery自定义下拉列表”关注的是如何使用jQuery来实现一个功能丰富的下拉选择组件,这在网页表单设计中非常常见。 首先,我们来探讨CSS在自定义下拉列表中的作用。CSS(Cascading Style Sheets)是用于控制...

    jquery div 下拉框 下拉列表

    本知识点将详细讲解如何使用jQuery创建一个基于div的下拉框,实现下拉列表的功能。 首先,理解jQuery的核心概念。jQuery通过选择器选中DOM元素,然后对这些元素进行操作。例如,`$("#myDiv")`会选中ID为"myDiv"的...

    jquery实现 下拉列表

    总结来说,jQuery提供了一种简单、高效的方式来实现和控制下拉列表。无论是对原生`&lt;select&gt;`元素进行操作,还是构建自定义的下拉列表,jQuery的事件处理和DOM操作都能让开发者事半功倍。通过熟练掌握这些技术,你...

    jquery下拉列表插件

    8. **API控制**:开发者可以通过调用插件提供的API方法来动态改变下拉列表的状态,例如`selectBox('refresh')`刷新列表,`selectBox('disable')`禁用插件等。 在实际应用中,`selectBox`插件通常与HTML结构配合使用...

    jQuery三级下拉列表导航菜单

    jQuery作为一款强大的JavaScript库,提供了丰富的功能来实现复杂的交互效果,其中包括制作三级下拉列表导航菜单。本文将深入探讨如何利用jQuery创建这种功能强大的导航菜单。 首先,我们需要理解基本的HTML结构。一...

    Jquery多选下拉列表插件jquery multiselect

    为此,jQuery提供了一个强大的多选下拉列表插件——jQuery Multiselect。该插件不仅使多选下拉列表更加美观,还提供了丰富的功能和自定义选项,极大地提升了用户体验。 ### 1. 插件介绍 jQuery Multiselect是由...

    jquery下拉列表特效

    3. 方法调用:除了初始化,还可以使用其他方法如`.dkSelect()`、`.dkDestroy()`等控制下拉列表的行为。 五、实战应用示例 结合DropKick,我们可以创建一个动态的、响应式的下拉列表,例如一个城市选择器。当用户...

    jQuery多级下拉菜单支持多级下拉列表菜单代码

    本文将深入探讨如何使用jQuery创建支持多级下拉的菜单,并分析提供的代码。 首先,我们理解jQuery的核心概念:它简化了DOM操作、事件处理和动画效果。对于多级下拉菜单,主要涉及的是DOM元素的选择、遍历和动态修改...

    Ztree jquery 下拉数 下拉列表(多选)

    总结一下,ZTree jQuery下拉列表(多选)是一个高效、灵活的解决方案,适用于需要多选功能的树形数据展示。通过合理配置ZTree的参数,处理数据源,以及监听和响应用户操作,你可以轻松地在项目中实现这一功能。在...

    jquery仿百度下拉列表搜索框

    `&lt;ul&gt;`元素的显示和隐藏将由jQuery控制。 2. **CSS样式**:使用jquery-ui.css来美化界面,包括搜索框和下拉列表的样式。jQuery UI库提供了丰富的CSS样式和主题,可以轻松定制UI外观。 3. **jQuery代码**:引入...

    jquery搜索框下拉列表选择搜索分类效果

    我们使用CSS类 `.hidden` 来控制下拉列表的显示与隐藏,可以定义为: ```css .hidden { display: none; } ``` 为了实现选择分类的功能,我们需要监听下拉列表中的点击事件,并将选中的分类设置为搜索框的值: ``...

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

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

    jquery自动滚动下拉列表框.rar

    《jQuery实现自动滚动下拉列表框技术详解》 在网页设计与开发中,jQuery库以其简洁易用的API和强大的功能深受开发者喜爱。本篇文章将深入探讨如何利用jQuery实现自动滚动下拉列表框这一常见的JS特效,特别是针对...

    jQuery ajax JSON 下拉列表框级联

    本示例中的"jQuery ajax JSON 下拉列表框级联"就是这样的一个应用。 1. **jQuery**:jQuery是一个高效、简洁且功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在本案例中,jQuery用于...

    Jquery針對下拉列表操作大全

    本文将详细介绍如何使用jQuery来操作下拉列表,包括获取和设置选择的文本、值,以及添加和删除选项。 **一、获取Select选择的Text和Value** 1. 通过`$("#select_id").change(function(){...})`,我们可以为下拉...

    jquery下拉列表插件简单实现类似google更多下拉列表

    在本文中,我们将深入探讨如何使用jQuery来创建一个功能丰富的下拉列表,其效果与Google的"更多"下拉菜单类似。这个插件提供了一种优雅的方式来显示大量数据,同时保持用户界面的简洁和易用性。让我们一起探索实现这...

    jQuery下拉列表复选框

    本文将详细介绍如何使用jQuery实现一个下拉列表复选框的功能,不依赖任何外部插件,保持原生样式,并且具有良好的可扩展性。 首先,我们来看一下标题"jQuery下拉列表复选框"所涉及的核心知识点。这里主要包含两部分...

Global site tag (gtag.js) - Google Analytics