`

Jquery select 用法

阅读更多
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 
5. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option 


//遍历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();//清空下拉框 


详细出处参考:http://www.jb51.net/article/23648.htm

 

分享到:
评论

相关推荐

    jquery select2组件

    **jQuery Select2组件详解** `jQuery Select2`是一款强大的、高度可定制的下拉选择框插件,它在原生HTML `&lt;select&gt;` 元素的基础...通过熟练掌握其使用方法和配置选项,开发者可以轻松地提升下拉菜单的交互性和美观度。

    jquery select2

    二、使用方法与示例 1. **基础应用**:首先,需要在页面中引入jQuery库和Select2库的CSS及JS文件。然后,通过`$('select').select2()`初始化选择器。 ```html &lt;link href="https://cdn.jsdelivr.net/npm/select2@4...

    jquery模拟select效果实现

    本文将详细讨论如何使用jQuery来实现这一功能,同时提供一个自编的简单实用的模拟select效果的代码示例。 首先,让我们理解原生HTML `select` 元素的基本功能。`&lt;select&gt;` 元素用于创建一个下拉列表,用户可以从中...

    jQuery Select(单选) 模拟插件 V1.3.6

    使用方法 使用该插件通常涉及以下步骤: 1. 引入jQuery库和插件的JS与CSS文件。 2. 在HTML结构中,使用常规的`&lt;select&gt;`元素,并为其添加特定的类名或ID以便于插件识别。 3. 在文档加载完成后,通过jQuery选择器...

    jQuery select下拉框美化代码.zip

    1. **初始化**:使用jQuery选择器获取所有的`&lt;select&gt;`元素,并为它们添加必要的类或ID,以便于后续的样式应用和事件绑定。 2. **事件监听**:添加事件监听器,如`click`事件,当用户点击下拉框时触发自定义的显示...

    jquery select列表选择框选中美化效果源码

    这段代码首先引入了jQuery库和Select2插件的相关文件,然后在文档加载完成后,使用jQuery的`$(document).ready`函数确保DOM已经加载完毕,最后调用`.select2()`方法来初始化美化效果。 总的来说,通过使用jQuery和...

    select2(jquery)插件下载

    4. 在页面加载完成后,调用`.select2()`方法启动插件。 通过以上介绍,我们可以看到jQuery Select2插件的强大之处,它不仅提升了用户体验,也为开发者提供了丰富的定制选项,是构建现代Web应用时不可或缺的一个工具...

    jquery selectcombo的用法

    本文将深入探讨jQuery SelectCombo的用法、特性以及实际应用场景,旨在帮助开发者更好地理解和运用这一工具。 一、SelectCombo简介 jQuery SelectCombo是一款基于jQuery的插件,它将传统的HTML Select元素转化为...

    jquery select美化插件

    对于“jquery.oopiu.select.1.0.1.js”插件的具体使用,由于没有提供详细文档,我们可能需要查看源代码或寻找相关的示例来学习其API和用法。一般来说,插件的初始化可能类似于`$('select').OopiuSelect();`。 除了...

    jQuery手机下拉框select

    - 在使用jQuery Mobile Select Menu时,确保页面结构遵循jQuery Mobile的页面模型,即每个页面都包含在一个`&lt;div data-role="page"&gt;`内。 - 为了性能考虑,避免在大型`&lt;select&gt;`元素上使用增强样式,因为这可能导致...

    jquery select 多种下拉日期选择插件

    1. **事件监听**:使用jQuery的`.on()`方法监听input元素的点击事件,触发下拉框的显示。 2. **动态创建下拉选项**:根据需求动态生成下拉菜单的选项,如“今天”、“过去七天”等。这些选项可以通过JavaScript计算...

    [转]Jquery操作select 收藏

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

    80、jquery select下拉框美化代码

    本知识点聚焦于"80、jquery select下拉框美化代码",主要讨论如何使用jQuery来美化HTML中的select元素,以提升用户界面的视觉效果和用户体验。 传统的HTML select元素在不同浏览器中的样式表现不一,且通常缺乏...

    jQuery实现select样式美化 jQselect.js

    要使用jQselect.js,你需要在页面中引入jQuery库和该插件的脚本文件,然后通过jQuery的选择器找到要美化的目标`&lt;select&gt;`元素,并调用相应的初始化方法。例如: ```html &lt;script src="path/to/jquery.min.js"&gt; ...

    jquery 超级select插件 v4.0版本

    五、使用方法与示例 要使用jQuery超级Select插件v4.0,首先需要在项目中引入jQuery库和插件文件。然后,通过jQuery选择器找到要替换的Select元素,并调用`.superSelect()`方法初始化插件。你可以传递配置对象来定制...

    jquery select 样式框架

    3. **index.html**:示例页面,展示了框架的使用方法和效果。开发者可以通过查看和修改这个文件来学习如何在自己的项目中应用该框架。 4. **jquery.stylish-select.js** 和 **jquery.stylish-select.min.js**:这是...

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

    本教程将详细讲解如何使用 `jQuery` 实现一个具有模糊搜索功能的下拉选择框,以提升用户在交互时的体验。 首先,我们需要了解 `select` 元素在HTML中的基本用法。`&lt;select&gt;` 标签用于创建一个下拉列表,用户可以...

    JQuery SELECT单选模拟jQuery.select.js

    插件使用了jQuery的fn扩展方法来实现自定义功能。具体实现步骤包括: 1. 首先,通过选择器获取当前select元素的id和z-index,并记录当前选中项的索引。 2. 接着,在select元素后面添加一个新的div,其中包含模拟...

    jquery select插件.zip

    2. **选择元素**:使用jQuery选择器选取需要增强的`&lt;select&gt;`元素,例如:`$('select')`。 3. **初始化插件**:调用插件方法,初始化选择框,如:`$('select').selectDown();`。 4. **自定义设置**:如果需要,...

    jquery.editable-select

    4. **API 和事件**:`jquery.editable-select` 提供了一系列 API 方法和事件,允许开发者自定义其行为。例如,你可以通过 API 设置或获取选中项,监听用户输入或选择变化的事件,甚至可以添加或移除选项。 5. **...

Global site tag (gtag.js) - Google Analytics