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

jquery获得select option的值 和对select option的操作 及自定义属性

 
阅读更多
javascript 获取select中的option 自定义属性
var select = document.getElementById("select");
var lrc = select.item(select.selectedIndex).getAttribute("lrc");


http://www.cnblogs.com/QQJnet/archive/2011/12/11/2284174.html


jQuery获取Select元素,并选择的Text和Value: 

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

jQuery获取Select元素,并设置的 Text和Value: 
实例分析: 
1. $("#select_id ").get(0).selectedIndex=1;  //设置Select索引值为1的项选中 
2. $("#select_id ").val(4);   // 设置Select的Value值为4的项选中 
3. $("#select_id option[text='jQuery']").attr("selected", true);   //设置Select的Text值为jQuery的项选中 

jQuery添加/删除Select元素的Option项: 
实例分析: 
1. $("#select_id").append("<option value='Value'>Text</option>");  //为Select追加一个Option(下拉项) 
2. $("#select_id").prepend("<option value='0'>请选择</option>");  //为Select插入一个Option(第一个位置) 
3. $("#select_id option:last").remove();  //删除Select中索引值最大Option(最后一个) 
4. $("#select_id option[index='0']").remove();  //删除Select中索引值为0的Option(第一个) 
5. $("#select_id option[value='3']").remove();  //删除Select中Value='3'的Option 
6. $("#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); 
}) 
}) 





分享到:
评论

相关推荐

    jquery获得select option值

    根据提供的文件信息,我们可以总结出一系列关于如何使用jQuery来获取不同类型的表单元素(如文本框、单选按钮、复选框以及下拉列表)的值的方法。下面将详细介绍这些方法及其应用场景。 ### 一、获取文本框(input ...

    Jquery操作Select option整理

    ### jQuery 操作 Select Option 整理 #### 一、引言 在Web开发中,`&lt;select&gt;`元素作为用户交互的重要部分,常用于提供一系列选项供用户选择。jQuery作为一种流行的JavaScript库,极大地简化了DOM操作的过程,使得...

    select option带自定义图片

    总结来说,要实现`&lt;select&gt;`和`&lt;option&gt;`带有自定义图片的效果,我们需要结合HTML的`data-*`属性,JavaScript的动态操作和CSS的样式设计。这不仅增强了用户体验,也展示了前端技术在实现视觉效果方面的灵活性。在...

    用jquery获取select标签中选中的option值及文本的示例

    综上所述,示例演示了使用jQuery来获取select标签中选中项的值和文本的方法,并考虑了没有value属性的特殊情况,还涉及到了事件绑定和DOM操作的基本知识。对于学习和使用jQuery进行前端开发的读者来说,这些内容都是...

    自定义带图标的select,只需把图标地址写在option的title属性中即可

    总结来说,这个基于jQuery的自定义下拉框JS插件通过将图标地址插入到`&lt;option&gt;`的`title`属性中,实现了带图标的下拉框,支持选项分组,使得原本单调的`&lt;select&gt;`元素变得更加生动和易用。对于任何希望提升网站或...

    jquery 自定义select控件

    为了解决这个问题,开发者常常会使用jQuery等JavaScript库来创建自定义的Select控件,以实现更加美观和交互丰富的选择器。本文将深入探讨如何使用jQuery实现自定义Select控件,并分析其核心原理。 一、为何需要...

    jquery 封装select实现select自定义样式插件jquery.easydropdown.min.js

    《jQuery封装Select实现自定义样式插件:jquery.easydropdown.min.js》 在Web开发中,Select元素是常用的数据选择控件,但其默认样式通常较为单一,无法满足设计师们对界面美观度的需求。jQuery库为我们提供了丰富...

    jquery获得selectoption值[文].pdf

    以下是一些关于如何使用jQuery获取和设置`select`、`option`、`radio`、`checkbox`以及文本输入(`input[type=text]`)等元素的值的关键知识点: 1. **获取选中的`select`值**: ```javascript var item = $(...

    jQuery自定义select下拉菜单

    在实际项目中,你可能会找到现有的jQuery插件,如`select2`或`chosen.js`,它们提供了更丰富的功能和配置选项,可以帮助快速实现自定义select效果。 在这个名为"jiaoben1686"的压缩包中,可能包含了示例代码、CSS...

    Jquery获取Select标签的值

    本篇文章将详细介绍如何利用 jQuery 来获取 Select 标签的值以及相关的表单元素操作。 #### 一、获取 Select 标签的值 ##### 1. 获取 Select 的 Value 值 要获取 Select 下拉框的当前选中值(即 value 属性的值)...

    JQuery操作select

    在网页开发中,jQuery 是一个非常流行的 JavaScript 库,它提供了简洁、强大的API来操作DOM元素,包括对select这样的下拉列表的操作。本篇文章将详细讲解如何使用jQuery来操作select。 首先,`changeShipMethod`...

    jquery如何自定义select下拉样式

    5. **多选与分组**:如果需要支持多选或显示分组,只需在`&lt;select&gt;`元素中使用`&lt;optgroup&gt;`和`&lt;option multiple&gt;`,然后在初始化时设置`multiple`属性。 ```html &lt;select multiple&gt; &lt;option value="1"&gt;Option 1...

    jquery 美化select 自定义函数

    为了保持原有的增删改操作,我们可以在自定义元素上添加`data-*`属性,如`data-index`,以便在处理这些操作时找到对应的原始`select`选项。同时,我们需要确保在动态修改`select`时同步更新自定义元素。 例如,增加...

    [转]Jquery操作select 收藏

    在IT行业中,jQuery是一个非常流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。...通过学习这篇博客和提供的文件,开发者可以深化对jQuery操作select的理解,提升开发水平。

    jquery实现select互斥联动

    在网页开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互。在本示例中,我们将探讨如何使用jQuery实现“select”元素的互斥联动效果,这是一种常见的表单控件交互设计,常用于...

    jquery select2组件

    在开始使用`Select2`之前,确保已经引入了`jQuery`库和`Select2`的CSS与JS文件。通常情况下,你可以在项目中添加以下链接: ```html &lt;link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/...

    jquery自定义select下拉样式.zip

    综上所述,"jquery自定义select下拉样式"这个项目涉及到的关键知识点包括:HTML的`&lt;select&gt;`和`&lt;option&gt;`标签,jQuery事件监听和DOM操作,CSS样式设计,以及如何通过JavaScript实现动态交互效果。通过掌握这些技术,...

    jQuery获取Select标签的手册

    本手册将详细介绍如何使用jQuery获取和操作`Select`标签以及相关的`Radio`和`Checkbox`元素。 1. **获取Select标签的value值**: 要获取`Select`标签中当前选中的选项的`value`属性值,可以使用`$('select').val()...

    jQuery获取Select选择的Text和_Value

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

    jquery根据name取得select选中的值实例(超简单)

    实例如下所示: &lt;select name=region[province] id= class=region valid&gt; &lt;option value=0 selected=selected tier=1&gt;省、直辖...取得textarea的值 &lt;textarea id='address'&gt;&lt;/textarea &gt; $(#textare

Global site tag (gtag.js) - Google Analytics