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)" ...
随机推荐
- RAC集群安装校验输出信息
RAC集群安装校验输出信息 作者:Eric 微信:loveoracle11g [grid@rac-node1 grid]$ [grid@rac-node1 grid]$ ./runcluvfy.sh ...
- pandas中一列含有多种数据类型的转换:科学计算法转浮点数、字符映射
import pandas as pd import re def getNum(x): """ 科学计数法和字符转浮点数 """ if r ...
- 转载-----BUFG,IBUFG,BUFGP,IBUFGDS等含义以及使用
目前,大型设计一般推荐使用同步时序电路.同步时序电路基于时钟触发沿设计,对时钟的周期.占空比.延时和抖动提出了更高的要求.为了满足同步时序设计的要求,一般在FPGA设计中采用全局时钟资源驱动设计的主时 ...
- C语言:结构体,共用体
结构体: 一个变量,存储不同类型的数据项共用体:一个变量,存储不同类型的数据项,相同的内存位置,存储不同的数据类型 #include <stdio.h> #include <stri ...
- BZOJ3812主旋律
/* 这道题其实没有看懂 所以整理一下吧 首先思想转化成所有方案减去不强联通的方案 不强联通的方案相当于很多强联通分量缩点后的dag 转化成子问题, 问很多点的dag方案数 然后枚举作为出度为0的点集 ...
- hive中sql使用英文分号
hql只要遇见分号则认识是语句的EOF,所以对于分号,需要用“\“转义. 例如: insert overwrite table test_json_map select '{"account ...
- 超详细Redis数据库入门教程
[本教程目录] 1.redis是什么2.redis的作者何许人也3.谁在使用redis4.学会安装redis5.学会启动redis6.使用redis客户端7.redis数据结构 – 简介8.redis ...
- Grunt相关
安装Grunt 在命令行输入npm install -g grunt-cli
- jmeter关联Websocket包支持
消息文本发送内容采用的是websocket方式进行消息握手的,一次使用到WEBSOCKET包支持 对于它的介绍和使用如下: 一.首先,我们需要准备Jmeter的WebSocket协议的支持插件:JMe ...
- getpass模块 ---- optparse
getpass模块,不回显 常用方法 import getpass password=getpass.getpass('input your password: ').strip() 其他用法 use ...