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)" ...
随机推荐
- http note
http 多媒体传输协议 HyperText Transfer Protocol 超文本传输协议 https Hyper Text Transfer Protocol over Secure Sock ...
- CS229 3.用Normal Equation拟合Liner Regression模型
继续考虑Liner Regression的问题,把它写成如下的矩阵形式,然后即可得到θ的Normal Equation. Normal Equation: θ=(XTX)-1XTy 当X可逆时,(XT ...
- php引用变量
引用变量:在php中引用意味着用不同的名字访问同一个变量内容 定义方式:& 总结:$b=&$a其中$b是取到了$a的地址,随着$a的地址变化,不会重新开辟空间可以根据他们的内存占用情况 ...
- Solr DocValues详解
前言: 在Lucene4.x之后,出现一个重大的特性,就是索引支持DocValues,这对于广大的solr和elasticsearch用户,无疑来说是一个福音,这玩意的出现通过牺牲一定的磁盘空间带来的 ...
- 初级安全入门——XSS注入的原理与利用
XSS的简单介绍 跨站脚本攻击(Cross Site Scripting),为不和层叠样式表(Cascading Style Sheets,CSS)的缩写混淆,故将跨站脚本攻击缩写为XSS.恶意攻击者 ...
- 安全测试6_Web安全工具第二节(代理抓包分析工具)
上节课讲了浏览器及扩展,这节课继续来学习下抓包分析. 首先看下下图,了解下代理工具的原理:代理就相当于收费站一样,任何要通过的车辆必须经过它. 浏览器的代理我们可以通过设置进行手动设置代理,或者通过P ...
- 【转】【CUBE】Oracle分组函数之CUBE魅力
http://blog.itpub.net/519536/viewspace-610997/ Oracle的CUBE与ROLLUP功能很相似,也是在数据统计分析领域的一把好手. 关于ROLLUP的查 ...
- JVM Tools
Java VisualVm 提供可视化界面展示运行在JVM上应用的信息.这些信息可用于诊断剖析应用. Jconsole Jconsole是基于JMX监视工具.Jconsole使用内置的JMX在java ...
- 432 4.3.2 STOREDRV.Deliver; recipient thread limit exceeded
最近几天Hub-Mailbox服务器时不时就CPU超过90%.在任务管理器里面看到edgetransport占用大量CPU.进入EMC的队列查看器,看到邮箱数据库堵塞,队列上万. 堵塞的邮件大多是收件 ...
- <转载> MySQL 性能优化的最佳20多条经验分享 http://www.jb51.net/article/24392.htm
当我们去设计数据库表结构,对操作数据库时(尤其是查表时的SQL语句),我们都需要注意数据操作的性能.这里,我们不会讲过多的SQL语句的优化,而只是针对MySQL这一Web应用最多的数据库.希望下面的这 ...