Ajax与select标签的组合运用
-------------------------------------------------------------------------------------------------------
如下包含select的表单,使用Ajax提交表单数据:
<form>
<select name="id">
<option value="0">无</option>
<option value="1">选项一</option>
<option value="2">默认二</option>
<option value="3">默认三</option>
</select>
<button>提交</button>
</form>
/*
|---------------------------------------------------------------------------------
|思路一:使用change事件,通过设置第一个option的value值,提交时固定获取第一个option的value值
|@黑眼诗人 <www.farwish.com>
|---------------------------------------------------------------------------------
*/
$('select').change(function(){
var options = $("select").children(); //所有option对象
oThis = $(this); //当前option对象
$('select').children('option:eq(0)').val(oThis.val());//设置第一个option的value值 var id = oThis.val(); //第一个option的value值
var text = oThis.text();//选择的option文字
$('button').click(function(){
$.post('www.chenwei.ws', {id:id, text:text}, function(data){
//...........
});
});
}) 存在的问题:
1.当使用chang事件,再次选择默认option为'无'的情况,第一个option的value值不再变为0
/*
|---------------------------------------------------------
|思路二:使用option的selected属性,通过添加移除该属性 来标志选中
|@黑眼诗人 <www.farwish.com>
|---------------------------------------------------------
*/
$('select').children().click(function(data){
var options = $('select'),children();
oThis = $(this);
options.removeAttr('selected');
oThis.attr({selected:'true'});
var id = oThis.val();
var text = $("option[selected='true']").text();
$('button').click(function(){
$.post('www.chenwei.ws', {id:id, text:text}, function(data){
//............
});
});
})
存在的问题:
1.会改变原有select机制,选中的值无法显示
/*
|---------------------------------------------------------------------------------------
|思路三:不作更改操作,直接获取select标签的id值,文字为默认的option的文字,点击时获取option新的文字
|@黑眼诗人 <www.farwish.com>
|---------------------------------------------------------------------------------------
*/
var select = $('select');
var option = select.children('option:eq(0)');
var detail = option.text(); //初始文字
select.children().click(function(){
detail = $(this).text(); //如果有修改,动态获取文字
}); $('button').click(function(){
var id = select.val(); //直接获取select的id即为提交的id
var detail = detail; $.post('www.chenwei.ws', {id:id, detail:detail}, function(data){
//.............
})
});
使用'思路三'实现的Ajax提交与select标签的组合,没有发现存在任何的问题。
--------------------------------------------------------------------------------------------------------
Ajax与select标签的组合运用的更多相关文章
- JSTL和select标签的组合使用
1.用于根据不同的值显示对应的内容,不能选择 <select name="grade"> <c:choose> <c:when test=" ...
- 使用AJAX填充<select>标签下拉项,没有显示指定的option项
newCarInfo.js代码如下: $(function() { // 获取燃油种类 url = "basicFuelType_queryAll.action"; ...
- 项目总结09:select标签下封装option标签
项目中经常用到Select标签,用封装好的方法获取option,可以避免冗赘的代码: 1.JSP--标签 <select class="width_md" name=&quo ...
- ajax 拼接html标签 thinkphp
ajax 拼接html标签 thinkphp框架 一.html部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional ...
- 如何用jstl的select标签做二级联动下拉列表框??
下拉列表框的多级联动早就会了.但是用jstl的select标签做下拉列表框的做二级联动的时候还是遇到了些问题.主要问题在用Ajax查询到的数据如何拼成下拉选项的时候.其实很简单,但我还是折腾了好久.所 ...
- html之select标签
循环select标签 <select name="group_id"> {% for row in group_list %} <option value={{r ...
- html中select标签根据枚举获得值的总结
不知不觉在公司一个多月了,这一个月做了一个支票申请的web页面功能,都不是特别难,审核有公司给的工作流,分页工具和很多公用工具公司也都给了,所以觉得难度都不是很大.今天主管让我们修改了以前做的项目的代 ...
- select标签让文字垂直居中问题
直接在select样式中添加:padding:npx 0; n的大小视select标签的高度而定.一般为8px左右.
- 获取select标签选中状态 的label的值。
<select name="procode" onchange="alert(this.options[this.selectedIndex].text)" ...
随机推荐
- Mysql之 配置文件读取顺序
On Unix, Linux and Mac OS X, MySQL programs read startup options from the following files, in the sp ...
- 通过C#/.NET API使用CNTK
(原文)CNTK v2.2.0提供C#API来建立.训练和评估CNTK模型. 本节概要介绍了CNTK C#API. 在CNTK github respository中可以找到C#训练示例. 使用C#/ ...
- python学习笔记之一
1.可以自己运行,也可以被import后调用 if __name__ == '__main__' main() 2.可变参数,关键字参数,命名关键字参数 可变参数和关键字参数 def f1(a, b, ...
- 第8章 传输层(3)_TCP协议
3. 传输控制协议(TCP) 3.1 TCP协议的主要特点 (1)TCP是面向连接的传输层协议.即使用TCP协议之前必须先建立TCP连接.在传送数据完毕之后,必须释放己经建立的TCP连接. (2)每一 ...
- SHOI2016方
/* 上帝说 要方 是的 很方 计数问题的容斥思想 (首先要注意 正方形有斜着的QAQ) 考虑我们要求的合法正方形 ans 根据容斥 ans = 无限制方案书 - 一个点确定的方案数 + 两个点确定的 ...
- Hive快捷查询:不启用Mapreduce job启用Fetch task
启用MapReduce Job是会消耗系统开销的.对于这个问题,从Hive0.10.0版本开始,对于简单的不需要聚合的类似SELECT <col> from <table> L ...
- echarts.js应用之map
最近项目中用到了echarts.js中的map,我画了一个简版的案例,如下所示: 效果图: 主要代码如下: <!DOCTYPE html> <html lang="en&q ...
- Nginx的安装(CentOS 7环境)
安装所需环境 Nginx 是 C语言 开发,建议在 Linux 上运行,当然,也可以安装 Windows 版本,本篇则使用 CentOS 7 作为安装环境. 一. gcc 安装安装 nginx 需要先 ...
- Python的字典类型
Python的字典类型为dict,用{}来表示,字典存放键值对数据,每个键值对用:号分隔,每个键值对之间用,号分隔,其基本格式如下: d = {key1 : value1, key2 : value2 ...
- [Android] 使用ViewPager 实现导航
转载请标注:转载于http://www.cnblogs.com/Liuyt-61/p/6582667.html -------------------------------------------- ...