-------------------------------------------------------------------------------------------------------

如下包含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标签的组合运用的更多相关文章

  1. JSTL和select标签的组合使用

    1.用于根据不同的值显示对应的内容,不能选择 <select name="grade"> <c:choose> <c:when test=" ...

  2. 使用AJAX填充<select>标签下拉项,没有显示指定的option项

    newCarInfo.js代码如下: $(function() {     // 获取燃油种类     url = "basicFuelType_queryAll.action"; ...

  3. 项目总结09:select标签下封装option标签

    项目中经常用到Select标签,用封装好的方法获取option,可以避免冗赘的代码: 1.JSP--标签 <select class="width_md" name=&quo ...

  4. ajax 拼接html标签 thinkphp

    ajax 拼接html标签  thinkphp框架 一.html部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional ...

  5. 如何用jstl的select标签做二级联动下拉列表框??

    下拉列表框的多级联动早就会了.但是用jstl的select标签做下拉列表框的做二级联动的时候还是遇到了些问题.主要问题在用Ajax查询到的数据如何拼成下拉选项的时候.其实很简单,但我还是折腾了好久.所 ...

  6. html之select标签

    循环select标签 <select name="group_id"> {% for row in group_list %} <option value={{r ...

  7. html中select标签根据枚举获得值的总结

    不知不觉在公司一个多月了,这一个月做了一个支票申请的web页面功能,都不是特别难,审核有公司给的工作流,分页工具和很多公用工具公司也都给了,所以觉得难度都不是很大.今天主管让我们修改了以前做的项目的代 ...

  8. select标签让文字垂直居中问题

    直接在select样式中添加:padding:npx 0; n的大小视select标签的高度而定.一般为8px左右.

  9. 获取select标签选中状态 的label的值。

    <select name="procode" onchange="alert(this.options[this.selectedIndex].text)" ...

随机推荐

  1. tensorflow读取数据的方式

    转载:https://blog.csdn.net/u014038273/article/details/77989221 TensorFlow程序读取数据一共有四种方法(一般针对图像): 供给数据(F ...

  2. 博客搬入CNBLOG

    由于无法改变的事实,原来在163blog中的博文永久停止更新.但博文内容仍然保留,在此也谢谢网易不杀之恩.毕竟那都是博主们一个字一个字的敲出来的心血.以后新的内容会在CNBLOG中进行更新.立贴为证. ...

  3. HBase原理和安装

    HBase的基本概念和安装: Hbase简介 HBase的原型是Google的BigTable论文,受到了该论文思想的启发,目前作为Hadoop的子项目来开发维护,用于支持结构化的数据存储. 官方网站 ...

  4. C语言:传值,传地址

    形参:形式参数实参:实际参数 传值: 把实参的值复制给形参, 修改函数内的形参,不会影响实参. 传地址: 指针传值,形参为指向实参地址的指针 当对形参的指向操作时,相当于对实参本身进行的操作 #inc ...

  5. What Your Computer Does While You Wait.CPU的等待有多久?

    原文标题:What Your Computer Does While You Wait 原文地址:http://duartes.org/gustavo/blog/ [注:本人水平有限,只好挑一些国外高 ...

  6. Tomcat启动报错:Possible root causes include a too low setting for -Xss and illegal cyclic inheritance dependencies

    错误代码如下: Caused by: java.lang.IllegalStateException: Unable to complete the scan for annotations for ...

  7. [Unity插件]Lua行为树(八):行为节点扩展

    先看一下之前的行为节点是怎么设计的: BTAction.lua BTAction = BTTask:New(); local this = BTAction; this.taskType = BTTa ...

  8. [UGUI]渲染层级关系

    参考链接: http://blog.csdn.net/meegomeego/article/details/42060389 Unity中的渲染顺序自上而下大致可以分为三层: 1.Camera层.可以 ...

  9. Ruby学习笔记5: 动态web app的建立 (2)

    上一节里,我们搭建了一个数据库的结构,并用index验证了request-response cycle,如下图: 1. Add show method into Controller 这一节,我们要继 ...

  10. <转载>http头 http://www.cnblogs.com/meil/archive/2007/03/06/665843.html

    HTTP(HyperTextTransferProtocol)是超文本传输协议的缩写,它用于传送WWW方式的数据,关于HTTP协议的详细内容请参考RFC2616.HTTP协议采用了请求/响应模型.客户 ...