`

总结出了各种利用jquery操作select下拉列表框集合

 
阅读更多
遍历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>

aaass
<!--下拉框-->
<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();//清空下拉框
0
0
分享到:
评论

相关推荐

    jQuery对Select的操作大集合(收藏)

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作,包括对Select元素的处理。Select元素是HTML中用于创建下拉列表的标签,通常用于提供多个选项供用户选择。本文将深入探讨jQuery如何操作...

    树形下拉列表框

    - **jQuery UI**: 提供了`selectmenu`插件,可以扩展出树形下拉列表功能。 - **Select2**: 虽然主要用于普通的下拉列表,但通过自定义模板和插件,也可以实现树形结构。 - **Selectize**: 这是一个轻量级的选择器库...

    c#可输入的下拉列表框

    "C#可输入的下拉列表框"是一种交互式控件,它结合了传统的下拉列表功能和文本输入框的功能,允许用户既可以从中选择已有的选项,也可以自由输入新的值。这种控件在提高用户体验和数据输入灵活性方面起到了重要作用。...

    下拉列表动态查询

    3. **字符串匹配**:使用`indexOf`或正则表达式进行字符串的匹配,找出与用户输入关键词匹配的下拉列表项。 4. **动态更新DOM**:找到匹配项后,我们需要更新下拉列表的显示。可以使用`querySelectorAll`获取所有...

    jquery操作下拉列表、文本框、复选框、单选框集合(收藏)

    在上述描述中,已经展示了如何使用jQuery来操作下拉列表、文本框、复选框和单选框的值,包括获取、添加、删除和遍历等操作。这些操作对于制作动态网页表单、提升用户体验以及处理表单数据非常有用。而在实际应用中,...

    jquery 动态遍历select 赋值的实例

    这是一项非常实用的技术,尤其在动态网站开发中,经常会遇到需要根据不同的数据动态更新下拉列表选项的情况。 知识点一:遍历和选择select元素中的选项 在jQuery中,可以使用多种选择器来选取页面中的select元素,...

    Jquery 操作 Dom 标签 select

    `&lt;select&gt;` 标签用于创建一个下拉列表。使用 jQuery 获取或设置 `&lt;select&gt;` 元素的值非常方便: 1. **获取选中的值**: ```javascript var selectedValue = $('#select_id').val(); console.log(selectedValue);...

    25 个免费的 HTML5 CSS3 jQuery 下拉菜单

    对于下拉菜单,HTML5中的&lt;select&gt;元素通常用来创建传统的选择列表,但通过添加自定义数据属性和JavaScript,我们可以创建更复杂的交互式下拉菜单。 CSS3是层叠样式表的第三版,带来了许多新特性,如选择器扩展、...

    jq下拉列表特效.zip

    在JavaScript库jQuery的帮助下,我们可以创建出更为动态、美观的下拉列表特效,以提升用户体验。"jq下拉列表特效.zip"这个压缩包包含了8种不同的下拉列表js插件,这些插件可以为你的网站添加独特的视觉效果。 1. **...

    jQuery搜索框输入下拉文字高亮代码.zip

    3. **处理下拉列表**:获取下拉列表的所有选项,可能是一个`&lt;select&gt;`元素的`&lt;option&gt;`,或者是一个`&lt;ul&gt;`或`&lt;ol&gt;`的`&lt;li&gt;`元素集合。遍历这些元素,检查它们的文本是否包含关键词。 4. **模糊匹配和高亮**:对于每...

    jQuery动态产生select option下拉列表

    jQuery动态产生select option下拉列表的实现方法涉及到了前端技术中的JavaScript库jQuery,通过这个库可以方便地操作DOM元素,实现动态的内容更新。在此过程中,主要利用了jQuery中的创建元素、属性设置、事件绑定等...

    Jquery API (字母排序与列表框两种均有)

    在HTML中,列表框通常指的是`&lt;select&gt;`元素,用于创建下拉选项列表。jQuery提供了丰富的API来操作这些元素,包括选择、添加、删除和修改选项。 1. **选择选项**:使用`val()`方法可以设置或获取选中的值。例如: ...

    jquery实现级联操作

    在级联下拉列表中,我们主要利用jQuery的`change()`事件监听用户在第一个下拉列表中的选择,并触发AJAX请求获取相应的二级数据。 1. **HTML结构**: 创建两个`&lt;select&gt;`元素,分别代表主级和子级的下拉列表。每个`...

    一个select下拉的js脚本

    本文将深入探讨如何利用JavaScript来操作和控制`select`下拉列表,以及相关的知识点。 首先,我们需要了解JavaScript中的DOM(Document Object Model),它是一个基于树形结构的文档对象模型,允许我们通过编程方式...

    下拉菜单集合(二级、三级下拉菜单)

    在本资源包“下拉菜单集合”中,包含了多种类型的下拉菜单,包括二级和三级下拉菜单,这些设计通常用于导航栏、设置选项或用户界面的其他部分,以节省屏幕空间并提升用户体验。 一、下拉菜单的基本结构与原理 下拉...

    struts2二级联动下拉列表

    在给定的“struts2二级联动下拉列表”项目中,开发者利用Struts2、Hibernate和Spring这三大核心技术,创建了一个功能,使得用户在网页上可以选择省份和城市,这两个下拉列表会进行联动,即选择省份后,城市下拉列表...

    JQuery设置获取下拉菜单某个选项的值(比较全)

    `&lt;select&gt;`标签定义了一个下拉列表,而`&lt;option&gt;`标签定义了下拉列表中的每一个可选条目。 1. 获取下拉菜单选中的文本 要获取下拉菜单中当前选中项的文本,可以使用JQuery提供的方法: ```javascript $("#...

    JQuery操作Select的Options的Bug(IE8兼容性视图模式)

    在IE8兼容性视图模式下,JQuery可能无法正确地处理Select的Options,导致用户在尝试选择下拉列表中的选项时,虽然选项存在,但在界面中却没有显示出来。这种情况通常在级联下拉框中尤为明显,即一个下拉框的值变化会...

    jQuery联动下拉菜单

    这种功能通常涉及到多个相关联的数据集合,如省份和城市的关系,用户在选择省份后,城市下拉菜单会显示对应省份的城市列表。 三、实现联动下拉菜单的步骤 1. HTML结构:首先,我们需要创建HTML的基础结构,包含两...

Global site tag (gtag.js) - Google Analytics