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)" ...
随机推荐
- SSH配置文件详解
SSH:是一种安全通道协议,主要用来实现字符界面的远程登录,远程复制等功能. 在RHEL系统中SSH使用的是OpenSSH服务器,由opensh,openssh-server等软件包提供的. sshd ...
- Java - 17 Java 流(Stream)、文件(File)和IO
Java 流(Stream).文件(File)和IO Java.io包几乎包含了所有操作输入.输出需要的类.所有这些流类代表了输入源和输出目标. Java.io包中的流支持很多种格式,比如:基本类型. ...
- mysql定时备份
1.创建备份DB的脚本 python版本的脚本 db_backup.py import os password='df' os.system('mysqldump -uroot -p{} fwss & ...
- Beanutils工具常用方法
BeanUtils工具是一种方便我们对JavaBean进行操作的工具,是Apache组织下的产品.其主要目的是利用反射机制对JavaBean的属性进行处理. BeanUtils工具一般可以方便ja ...
- access oarcle
1 默认值2 自动增加字段3 now() time() date() 更改sysdate4 datediff5 保留字 date 名字段6isnull(rowname)要改成rowname = nul ...
- 文件查重工具 ultraCompare 和 UltraFinder 用法
UltraCompare 是一款文件内容比较工具,它可以对于文本.文件夹.二进制进行比较.可进行文本模式,文件夹模式以及二进制模式的比较,可对比较的文件.文件夹等进行合并,同步等操作.是进行比较操作的 ...
- 24.纯 CSS 创作出平滑的层叠海浪特效
原文地址:https://segmentfault.com/a/1190000014895634 感想:这里的波浪只是侧面的,利用几个平面一部分弧旋转得到. HTML代码: <div class ...
- Javascript 中 null和undefined的区别
null表示"没有对象",即该处不应该有值.典型用法是: (1) 作为函数的参数,表示该函数的参数不是对象. (2) 作为对象原型链的终点. Object.getPrototype ...
- 《汇编语言 基于x86处理器》第十一章 MS-DOS 编程部分的代码 part 2
▶ 书中第十一章的程序,主要讲了 Windows 接口,在小黑框中进行程序交互 ● 在屏幕指定位置输出带自定义属性的文字 INCLUDE Irvine32.inc .data outHandle HA ...
- MFC 如何在一个类中使用在其他类中定义的变量或函数
[声明:本文的知识点来源于网络,参考网址:https://blog.csdn.net/bill_ming/article/details/7407848] [以下三种方法亲测有效,可以根据具体情况来选 ...