`
frank1998819
  • 浏览: 752281 次
  • 性别: Icon_minigender_1
  • 来自: 南京
文章分类
社区版块
存档分类

jQuery 操作 下拉框 文本框(转)

 
阅读更多

jquery操作下拉框

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

http://www.cnblogs.com/SAL2928/archive/2008/10/28/1321285.html

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的项目为当前选中项
$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option
$("#sel").empty();//清空下拉框

----------------------------------------------------------------------------------------------------

//遍历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'& gt;1111</option><optionvalue='2'>2222</option& gt;").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();// 清空下拉框

 

分享到:
评论

相关推荐

    下拉框和文本框组合共用-可以输入的下拉框ok

    3. **组合设计**:将下拉框与文本框组合,通常是通过JavaScript或jQuery等前端库实现的。这种方式可以提供一个可搜索的下拉列表,用户既可以快速选择列表中的选项,也可以在输入框中手动输入。这种设计提高了用户...

    jquery实现动态添加文本框和下拉框效果

    jquery实现动态添加文本框和下拉框效果。

    类ajax的带下拉框的文本框

    在IT领域,尤其是在Web开发中,"类Ajax的带下拉框的文本框"是一种常见的交互元素,它结合了Ajax技术与传统的下拉选择框,提供了更流畅、更高效的用户体验。这种文本框允许用户在输入时实时从服务器获取并显示匹配的...

    jQuery input文本框点击下拉菜单选择代码

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理、动画效果和Ajax交互。本文将详细讲解如何使用jQuery实现一个功能,即当用户点击input文本框时,弹出一个下拉菜单供用户选择。...

    JQuery年月日三级下拉框联动

    "JQuery年月日三级下拉框联动"就是一个解决此类需求的方案,它利用JavaScript库JQuery的便利性和高效性,实现了用户在选择年份后,月份和日期下拉框自动更新的交互效果。这种方式可以提高用户体验,减少用户手动操作...

    jquery input文本框模拟select选择框获取选定

    总结来说,使用jQuery可以方便地将input文本框模拟成select选择框,实现与真实下拉框类似的功能。这主要通过动态操作DOM、添加事件监听器以及使用插件来完成。在实际项目中,根据具体需求选择合适的方法,并注重用户...

    下拉框自动匹配文本框输入内容

    以上就是关于“下拉框自动匹配文本框输入内容”的核心知识点,它涉及到前端开发中的DOM操作、事件监听、数据过滤以及用户交互优化等多个方面。希望这个解释对你理解和实现类似功能有所帮助。在实践中,可以根据具体...

    文本框获取焦点弹出下拉框

    要实现在文本框获取焦点时弹出下拉框,通常需要结合JavaScript或者jQuery进行操作。JavaScript是一种广泛使用的客户端脚本语言,可以动态修改网页内容和行为。jQuery则是一个流行的JavaScript库,提供了更简洁的API...

    jquery实现Google自动下拉框

    ### 使用jQuery 1.3实现Google自动下拉框功能解析 #### 一、背景与目的 随着Web技术的发展,用户体验成为衡量网站质量的重要标准之一。其中,自动完成(Auto Complete)功能作为提升用户输入效率的有效手段,在众多...

    jQuery实现select下拉框样式美化效果

    内容索引:脚本资源,jQuery,Select,下拉框美化 jQuery实现select下拉框样式美化效果,这是个挺实用的网页美化技巧,现在jquery很流行,用它不但可以实现交互的Ajax效果,同时也可用来美化表单元素,像下拉框,单选框...

    jQuery实现点击下拉框中的值累加到文本框中的方法示例

    在本文中,我们将深入探讨如何使用jQuery实现一个功能:当用户点击下拉框(Select)中的选项时,所选值会被累加并显示在文本框(Input)中。这个功能适用于那些需要收集多项选择并进行计算或展示的场景,如统计用户...

    jQuery基于vue.js下拉框菜单选择和日期时间选择代码

    你可以添加事件监听器来处理选择后的操作,例如显示在下方文本框: ```html 选定日期时间:{{ selectedDateTime }} ``` 在JavaScript中,确保Vue实例和jQuery代码正确配合,可能需要在Vue的`mounted`生命周期钩子...

    jQuery input文本框点击出现下拉选择框特效源码.zip

    同时,jQuery还提供了`.change()`事件监听器,用于在用户选择下拉框中的选项后执行相应操作,比如更新输入框的值。 在文件列表中,"132686944431190944"很可能是源代码文件,可能是.js或.html格式,包含实际的...

    jquery ui 实现的选择框

    闲来无事,用jquery模拟了一个下拉框,可以通过输入框对下拉列表进行过滤. 原理: 1.下拉框由div和文本框组成, 2.点击下拉框弹出下拉列表 3.向文本框输入值时对下拉框进行过滤 4.选择值后将值回显到输入框 依赖: jquery...

    文本框与下拉框组合并能智能检索

    3. **JavaScript/jQuery代码**:通过引入jQuery库,编写JavaScript代码来实现文本框与下拉框的联动以及自动完成功能。`js`目录下的文件很可能是实现这些功能的脚本。 4. **数据源**:可能需要一个数据源来提供下拉...

    asp.net可输入可选择下拉框

    在这种情况下,“asp.net可输入可选择下拉框”应运而生,它结合了文本框和下拉框的优点,提供了更灵活的交互体验。 首先,我们需要理解这个自定义用户控件的工作原理。通常,它是通过JavaScript或者jQuery在客户端...

    jquery+struts2实现文本框自动完成

    类似百度和淘宝搜索框,输入一部分内容,自动联想相关内容,点击下拉框条目自动完成文本框输入。其中同时包括不通过struts2获取数据的实现方法。参考网址http://jqueryui.com/autocomplete/

    Jquery实现仿搜索引擎文本框自动补全插件

    Jquery实现仿搜索引擎文本框自动补全插件功能很实用,使用也很简单,引入了插件之后写几行代码就可以实现,可以灵活设置 //width:下拉框的宽度,默认使用输入框宽度、用来ajax后台获取数据,返回的数据格式为data...

Global site tag (gtag.js) - Google Analytics