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)" ...
随机推荐
- java基础阶段关于密码或账号字符数字的判断总结
将字符串转成字符数组 首字母判断 思路:应该如何获取首字母 arr[0]为数组第一个元素即是首字母 数字判断true为数字false为非数字 "0123456789".contai ...
- (转)C#动态webservice调用接口
原文地址:http://www.cnblogs.com/zouhao/p/6236785.html ,此处仅测试了使用Http post请求调用webservice 调用类: using Syst ...
- tkinter简单使用
第一个运行程序 # -*- coding: utf-8 -*- import tkinter as tk //引入 root = tk.Tk() // 实例化root T大写k小写 root.titl ...
- 常见sql注入的防范总结
在平时的开发过程中,我们可能很少会刻意的去为项目做一个sql注入的防范,这是因为你可能因为使用了某些框架,而无意间已经有了对应sql注入的一些防范操作(比如mybatis使用#{XX}传参,属于预编译 ...
- 使用python操作excel表格
首先 pip install xlrd 安装相关模块 其次:使用方法: 1 导入模块 import xlrd 2 打开excel文件读取数据 worksheet=xlrd.open_workbook ...
- html-prepend
$('.classDiv').prepend('<span>添加</span>')
- xmlhttp.readyState的值及解释:
xmlhttp.readyState的值及解释: 0:请求未初始化(还没有调用 open()). 1:请求已经建立,但是还没有发送(还没有调用 send()). 2:请求已发送,正在处理中(通常现在可 ...
- 学习笔记: js插件 —— SuperSlide 2 (轮播图插件,PC用)
SuperSlide 2 轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...
- 使用RecyclerView打造Gallery
RecyclerView概述 RecyclerView是谷歌推出的用于向大型数据集提供有限窗口的灵活视图.可以通过导入support-v7对其进行使用. 据官方的介绍,该控件用于在有限的窗口中展示大量 ...
- 汉诺塔问题python
count = 0def hanoi(n,src,mid,dst): global count if n == 1: print("{}:{}->{}".format(1,s ...