`
asjava
  • 浏览: 138475 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

jQuery操作Select元素

 
阅读更多

jQuery获取Select元素,并选择的Text和Value:
复制代码 代码如下:

$("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发
var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text
var checkValue=$("#select_id").val(); //获取Select选择的Value
var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值
var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值

jQuery获取Select元素,并设置的 Text和Value:

实例分析:
代码如下:

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

jQuery添加/删除Select元素的Option项:

实例分析:
复制代码 代码如下:

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

三级分类 <select name="thirdLevel" id="thirdLevel"
onchange="getFourthLevel()">
<option value="0" id="thirdOption">
请选择三级分类
</option>
</select>
</div>

四级分类:
<select name="fourthLevelId" id="fourthLevelId">
<option value="0" id="fourthOption">
请选择四级分类
</option>
</select>
</div>
if($("#thirdLevel").val()!=0){
$("#thirdLevel option[value!=0]").remove();
}
if($("#fourthLevelId").val()!=0){
$("#fourthLevelId option[value!=0]").remove();
}//这个表示:假如我们希望当选择选择第三类时:如果第四类中有数据则删除,如果没有数据第四类的商品中的为默认值。在后面学习了AJAX技术后经常会使用到!

获取Select :
获取select 选中的 text :
$("#ddlRegType").find("option:selected").text();
获取select选中的 value:

$("#ddlRegType ").val();

获取select选中的索引:
$("#ddlRegType ").get(0).selectedIndex;
设置select:
设置select 选中的索引:
$("#ddlRegType ").get(0).selectedIndex=index;//index为索引值

设置select 选中的value:
复制代码 代码如下:

$("#ddlRegType ").attr("value","Normal“);
$("#ddlRegType ").val("Normal");
$("#ddlRegType ").get(0).value = value;

设置select 选中的text:
复制代码 代码如下:

var count=$("#ddlRegType option").length;
for(var i=0;i<count;i++)
{ if($("#ddlRegType ").get(0).options[i].text == text)
{
$("#ddlRegType ").get(0).options[i].selected = true;
break;
}
}

$("#select_id option[text='jQuery']").attr("selected", true);

设置select option项:
复制代码 代码如下:

$("#select_id").append("<option value='Value'>Text</option>"); //添加一项option
$("#select_id").prepend("<option value='0'>请选择</option>"); //在前面插入一项option
$("#select_id option:last").remove(); //删除索引值最大的Option
$("#select_id option[index='0']").remove();//删除索引值为0的Option
$("#select_id option[value='3']").remove(); //删除值为3的Option
$("#select_id option[text='4']").remove(); //删除TEXT值为4的Option

清空 Select:

$("#ddlRegType ").empty();

jquery获得值:

val()
text()

设置值
val('在这里设置值')
复制代码 代码如下:

    $("document").ready(function(){
    $("#btn1").click(function(){
    $("[name='checkbox']").attr("checked",'true');//全选
    })
    $("#btn2").click(function(){
    $("[name='checkbox']").removeAttr("checked");//取消全选
    })
    $("#btn3").click(function(){
    $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数
    })
    $("#btn4").click(function(){
    $("[name='checkbox']").each(function(){//反选
    if($(this).attr("checked")){
    $(this).removeAttr("checked");
    }
    else{
    $(this).attr("checked",'true');
    }
    })
    })
    $("#btn5").click(function(){//输出选中的值
    var str="";
    $("[name='checkbox'][checked]").each(function(){
    str+=$(this).val()+"\r\n";
    //alert($(this).val());
    })
    alert(str);
    })
    })

分享到:
评论

相关推荐

    Selenium WebDriver调用JQuery操作Select元素

    使用Selenium自带的API操作Select元素时页面可能出现上移或遮挡,导致元素操作失败; 介于此问题,可以使用JQuery来操作Select元素,具体实现见附件。

    [转]Jquery操作select 收藏

    总的来说,掌握jQuery操作select的方法对于前端开发来说是非常实用的技能,它能够提高代码的效率和可读性,同时为用户带来更好的交互体验。通过学习这篇博客和提供的文件,开发者可以深化对jQuery操作select的理解,...

    jQuery为动态生成的select元素添加事件的方法

    6. 动态添加元素到页面中:在需要的时候,使用jQuery的`.append()`方法将创建好的select元素添加到页面的指定容器中。这个操作会把新的HTML字符串插入到页面的DOM中,从而使得select元素变得可用。 7. 绑定事件到...

    jquery操作select大全

    在本篇中,我们详细讲解了如何使用jQuery来操作select元素,包括添加、删除、获取和设置选中的option。同时,还介绍了如何操作单选框Radio和复选框Checkbox。这些操作是网页交互中非常重要的部分,掌握了这些知识,...

    jQuery获取Select选择的Text和_Value

    jQuery 获取 Select 选择的 Text 和 Value 是一种常见的操作,例如在表单提交前获取用户选择的选项,或者在页面加载时根据服务器端的数据设置选择的选项。本文将详细介绍 jQuery 获取和设置 Select 选择的 Text 和 ...

    JQuery操作select

    本篇文章将详细讲解如何使用jQuery来操作select。 首先,`changeShipMethod`函数展示了如何遍历并修改select的option。在这个例子中,函数根据`shipping.value`的值决定是否移除或添加特定的option。当`shipping....

    jquery操作select元素和option的实例代码

    在本实例中,我们将深入探讨如何使用jQuery来操作`select`元素及其内部的`option`选项。 首先,我们需要引入jQuery库,这可以通过在HTML文档的`&lt;head&gt;`部分添加jQuery的CDN链接或者本地路径来实现。在这个例子中,...

    Jquery操作Select option整理

    本文档汇总了一系列关于如何使用jQuery来操作`&lt;select&gt;`元素及其`&lt;option&gt;`子元素的方法,旨在为前端开发者提供一个实用的参考指南。 #### 二、遍历和操作 `&lt;option&gt;` 元素 **1. 遍历并移除特定 `&lt;option&gt;`:** ```...

    jquery 超级select插件 v4.0版本

    这时,jQuery超级Select插件应运而生,它为开发者提供了强大的功能和自定义选项,让Select元素变得更具可扩展性和用户体验。本文将深入探讨jQuery超级Select插件的v4.0版本。 一、jQuery超级Select插件概述 jQuery...

    cool的JQuery自定义select

    "cool的JQuery自定义select"就是为了解决这个问题而出现的一个插件,它通过jQuery库对select元素进行了美化,提供了简洁且易于使用的界面,增强了用户体验。 jQuery是一款强大的JavaScript库,它简化了JavaScript的...

    jquery.selectlist.js

    在Web开发中,Select下拉框作为常见的表单元素,其交互体验往往受到限制,特别是在处理大量选项或需要高级交互效果时。为此,开发者们创造了许多插件来增强Select的功能,其中之一就是`jquery.selectlist.js`。本文...

    Jquery操作select标签例子

    首先,要进行jQuery操作,需要在HTML文档中引入jQuery库。在这个例子中,我们使用的版本是`jquery-1.8.3.min.js`。确保在`&lt;head&gt;`标签内或者`&lt;body&gt;`标签的最上方引入此文件,如下所示: ```html &lt;script src="...

    jquery select2组件

    `jQuery Select2`是一款强大的、高度可定制的下拉选择框插件,它在原生HTML `&lt;select&gt;` 元素的基础上提供了丰富的功能和优秀的用户体验。这款组件广泛应用于网页开发中,使得传统的单选或多选下拉菜单变得更加美观且...

    jquery 动态遍历select 赋值的实例

    在jQuery中,可以使用多种选择器来选取页面中的select元素,并对其进行操作。例如,使用 $("#selDepUnit") 可以选取id为selDepUnit的select元素。若要获取这个select元素当前选中的值,可以使用.children('option:...

    jquery实现select带模糊搜索下拉选择框

    在网页开发中,`jQuery` 是一款非常流行的 JavaScript 库,它简化了DOM操作、事件处理、动画制作等任务。本教程将详细讲解如何使用 `jQuery` 实现一个具有模糊搜索功能的下拉选择框,以提升用户在交互时的体验。 ...

    jquery Firefox3.5中操作select的问题

    然而,在使用jQuery操作select元素时,不同的浏览器可能会有不同的表现,特别是当浏览器版本更新后,原先的代码可能就不再适用了。本文档提到的问题就是关于在Firefox 3.5版本浏览器中,jQuery操作select元素选中项...

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

    本文将详细介绍jQuery操作select元素的常见方法,并结合实例总结分析了7种常见情况及其操作技巧。 1. 获取选中的select的option的值或文本 当用户从下拉选择框中选择一个选项时,我们可能需要获取该选项的值(value)...

    jQuery取得select选择的文本与值的示例

    通过以上介绍,我们可以看到使用jQuery操作select元素的方法不仅多样而且方便。无论是在获取选中项的文本与值,还是设置选中项,以及操作select元素的结构方面,jQuery都提供了强大的工具。在Web开发过程中,熟练...

    jquery实现select互斥联动

    在本示例中,我们将探讨如何使用jQuery实现“select”元素的互斥联动效果,这是一种常见的表单控件交互设计,常用于多级筛选或配置场景。 一、基本概念 1. jQuery:jQuery 是一个高效、简洁而易用的JavaScript库,...

Global site tag (gtag.js) - Google Analytics