`

jquery常用方法——select控件

 
阅读更多
//select控件
var selectObj = $("#selector");  //根据ID
或
var selectObj = $(o);  //根据对象
/*
eg:
<select id="catId" onchange="changeGoodsType(this);">
function changeGoodsType(o){
	catObj = $(o);
	...	
}
*/

//select控件被选索引,selectObj对象推荐用document.getElementById("selId")获取,否则有些时候取出的值为undifined
var selIndex = selectObj.selectedIndex;  

//设置select控件默认被选项
$("#myyhlx option[value='123']").attr("selected","selected");  //有时无效,不建议使用
document.getElementById("myyhlx")[i].selected=true;  //推荐使用,设置第i个option为默认被选项,i从0开始。

//select控件被选值
var selValue = selectObj.val();
或
var selValue = selectObj.value;
或
var selValue = selectObj.options[selIndex].value;  

//select控件被选择的Text
var selText = selectObj.find("option:selected").text(); 

//select控件被选项的某个属性值
var selTitle = selectObj.options[selIndex].getAttribute("title_cat");

注:selectObj如果通过$("#selector")获取select对象来执行本操作,会有JS错误,需要通过:document.getElementById("selector")来获得。
//删除select中全部option项
var catSel = document.getElementById("catId");
var cId = $(catSel);
var text = "<option value=''>请选择分类</option>";
$(cId).html("");
或
var catSel = document.getElementById("catId");
var cId = $(catSel);
var text = "<option value=''>请选择分类</option>";
$(cId).empty();  
或
function removeSelectAllOptions(obj) {
	for (i = 0; i < obj.options.length; i++) {
		obj.options.remove(i);
		i--;
	}
}  

实例:

<input type="checkbox" id="selAllTdk" onclick="doSelectAllTdk();" value="">全选
<input type="checkbox" name="checkBoxTdkId" onclick="isSelectAllTdk(this);" value="1">
<input type="checkbox" name="checkBoxTdkId" onclick="isSelectAllTdk(this);" value="2">

function doSelectAllTdk() {
	if($("#selAllTdk").attr("checked") == true) {
		$("[name='checkBoxTdkId']").attr("checked",'true');
	} else {
		$("[name='checkBoxTdkId']").removeAttr("checked");
	}
}
function isSelectAllTdk(tdk) {
	if($(tdk).attr("checked") != true) {
		$("#selAllTdk").removeAttr("checked");
	}
}

function batchDelete() {
	var tdkIds = "";
	if ($("input:checked[name='checkBoxTdkId']").length > 0) {
		$($("input:checked[name='checkBoxTdkId']")).each(function() {
			tdkIds += this.value + ",";
		});
		$.msgbox({
	        height: 150,
	        width: 250,
	        content: {
	            type: 'confirm',
	            content: '确定要删除吗?'
	        },
	        onClose: function(v) {
	            var url = basePath + '/tdk/batchDelete_tdk.action?tdkIds=' + tdkIds;
	            if (v) {
	                $.ajax({
	                    type: "POST",
	                    url: url,
	                    data: "0",
	                    async: false,
	                    //ajax同步
	                    dataType: 'txt',
	                    //接受数据格式    
	                    success: function(text) {
	                        if (text == '-1') {
	                            alert("没有权限");
	                        } else {
	                            parent.location.reload();
	                        }
	                    }
	                });
	            }
	        }
	    });
	}
}
  • 大小: 4.4 KB
分享到:
评论

相关推荐

    jquery 多功能select控件,多功能选择控件

    《jQuery多功能Select控件——实现高效交互与美观界面》 在网页开发中,Select控件是常见的用户交互元素,用于提供下拉选项供用户选择。然而,原生的HTML Select控件在功能和视觉效果上往往无法满足现代网页设计的...

    jQuery移动端触屏滑动日期控件(mobiscroll时间控件)Demo

    **jQuery 移动端触屏滑动日期控件——Mobiscroll 时间控件** Mobiscroll 是一个高效、响应式的JavaScript库,专为移动设备设计,同时也兼容桌面浏览器。它提供了一套完整的日期和时间选择器,使得在网页应用中添加...

    mobileSelect移动端手机下拉控件

    mobileSelect控件通过简洁的API和丰富的自定义选项,使得开发者能够轻松地在移动应用中集成高质量的下拉选择功能。 首先,我们来探讨一下mobileSelect的核心特性: 1. **响应式设计**:mobileSelect控件具备良好的...

    一个轻量级jQuery插件用可定制的下拉选择取代原生select元素

    本篇文章将详细介绍一个轻量级的jQuery插件——Hernan Sartorio的jQuery Nice Select,它能有效地用可定制的下拉选择组件替换原生的`&lt;select&gt;`元素,从而提升表单界面的视觉效果和用户交互体验。 jQuery Nice ...

    jQuery操作DOM之获取表单控件的值

    在这种情况下,jQuery提供了一个专门用于处理表单控件值的方法——`.val()`。`.val()`方法不仅能够获取当前值,还能进行设置,使得代码更简洁、高效。下面是一些示例: ```javascript // 取得文本输入框的当前值 ...

    jquery.ui-1.5b

    - **API 接口**:提供了丰富的 API 和方法,如 `.dialog('open')`、`.tabs('select', index)` 等,便于动态控制组件状态。 - **兼容性**:在当时的主流浏览器上运行良好,包括 IE6、IE7、Firefox、Safari 和 Chrome...

    周选择下拉控件

    EasyUI是一个基于jQuery的UI框架,它提供了丰富的组件来简化前端开发工作,如数据网格、表单、窗口、菜单等,当然也包括我们的主题——“周选择下拉控件”。EasyUI的这个组件允许开发者为用户提供一个简洁明了的方式...

    jQuery.my:jQuery.my 是一个将表单控件与 js 数据结构绑定的插件

    jQuery.my 可识别标准 HTML 控件以及由 jQuery Mobile 呈现的复合控件、几乎所有 jQuery UI 小部件、Redactor、Ace、CodeMirror、Select2 等。 提供全面的验证、条件格式和依赖项解析。 表单可以嵌套 - 每个 $.my ...

    jquery_ztree树形下拉框.rar

    《jQuery zTree——构建树形下拉框的详解与应用》 在Web开发中,为了提升用户体验和界面的交互性,我们常常会遇到需要展示层级结构数据的情况,这时树形控件便显得尤为重要。jQuery zTree是一款基于jQuery的优秀...

    JQuery中each()的使用方法说明

    在JavaScript的世界里,jQuery库提供了一个非常实用的函数——`each()`,用于遍历对象、数组的属性或元素。这个函数对于开发人员来说是不可或缺的,因为它极大地简化了迭代操作。接下来,我们将深入探讨`each()`函数...

    JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结

    本文将深入探讨jQuery如何与ASP.NET中的三个常见服务器控件——DropdownList、RadioButtonList和CheckboxList交互,以便于在客户端进行数据获取和操作。 ### 一、DropdownList DropdownList是下拉列表控件,通常...

    java jsp ajax 部门人员选择控件

    Ajax是Asynchronous JavaScript and XML的缩写,虽然现代应用中XML已经不常用,但是Ajax的核心思想——异步更新页面部分,仍然广泛应用于Web开发。在jQuery库的支持下,实现Ajax请求变得更加简单。在`addUI.jsp`中,...

    jquery插件 下拉框

    本文将深入探讨“jQuery插件——下拉框”这一主题,旨在帮助初学者更好地理解和应用这一功能。 首先,让我们了解什么是jQuery插件。jQuery插件是开发者为了扩展jQuery核心功能而编写的代码,它们通常是小型的、专门...

    web导航控件的使用

    本文将深入探讨一个常见的Web导航控件——TreeView,它以树形结构显示数据,通常用于展示层次关系的内容。通过学习如何使用TreeView,我们可以提升用户的浏览体验并增强网站的可操作性。 TreeView控件主要由节点...

    jQuery问卷调查表单编辑代码.zip

    进入核心部分——jQuery,它在表单编辑中扮演着关键角色。jQuery使得DOM操作变得简单,例如,我们可以使用`$(selector).val()`获取或设置表单控件的值,`$(selector).hide()`和`$(selector).show()`来隐藏和显示元素...

    日期选择器:jquery datepicker的使用

    在本篇文章中,我们将深入探讨如何使用jQuery库中的一个强大插件——jQuery UI的DatePicker,来实现日期选择输入功能。 jQuery UI是jQuery的一个扩展库,它提供了丰富的用户界面组件,包括日期选择器(DatePicker)...

    jquery.ui

    Combobox是jQuery UI中的一个混合控件,它将下拉列表(Select)和输入框(Input)的功能结合在一起,提供了一种方便的用户输入和选择方式。通过这个文件,开发者可以学习如何在实际项目中集成和配置Combobox,以及...

    jquery pocket reference

    这本书被寄予厚望,不仅因为作者的专业背景,还因为它针对的是广泛使用的JavaScript库——jQuery。 #### 二、jQuery基础知识 ##### 2.1 jQuery()函数 - **定义**:`jQuery()`是jQuery的核心函数,用于初始化一个新...

    ASP.NET源码——[聊天留言]搜搜.net留言本.zip

    这些类通常会提供Insert、Update、Delete和Select等方法。 5. **业务逻辑层(BLL)**:这一层处理应用程序的核心业务规则,调用DAL执行数据库操作,并对数据进行验证和处理。 6. **配置文件**:Web.config是ASP...

Global site tag (gtag.js) - Google Analytics