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

如下包含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. RAC集群安装校验输出信息

    RAC集群安装校验输出信息 作者:Eric 微信:loveoracle11g [grid@rac-node1 grid]$ [grid@rac-node1 grid]$ ./runcluvfy.sh ...

  2. pandas中一列含有多种数据类型的转换:科学计算法转浮点数、字符映射

    import pandas as pd import re def getNum(x): """ 科学计数法和字符转浮点数 """ if r ...

  3. 转载-----BUFG,IBUFG,BUFGP,IBUFGDS等含义以及使用

    目前,大型设计一般推荐使用同步时序电路.同步时序电路基于时钟触发沿设计,对时钟的周期.占空比.延时和抖动提出了更高的要求.为了满足同步时序设计的要求,一般在FPGA设计中采用全局时钟资源驱动设计的主时 ...

  4. C语言:结构体,共用体

    结构体: 一个变量,存储不同类型的数据项共用体:一个变量,存储不同类型的数据项,相同的内存位置,存储不同的数据类型 #include <stdio.h> #include <stri ...

  5. BZOJ3812主旋律

    /* 这道题其实没有看懂 所以整理一下吧 首先思想转化成所有方案减去不强联通的方案 不强联通的方案相当于很多强联通分量缩点后的dag 转化成子问题, 问很多点的dag方案数 然后枚举作为出度为0的点集 ...

  6. hive中sql使用英文分号

    hql只要遇见分号则认识是语句的EOF,所以对于分号,需要用“\“转义. 例如: insert overwrite table test_json_map select '{"account ...

  7. 超详细Redis数据库入门教程

    [本教程目录] 1.redis是什么2.redis的作者何许人也3.谁在使用redis4.学会安装redis5.学会启动redis6.使用redis客户端7.redis数据结构 – 简介8.redis ...

  8. Grunt相关

    安装Grunt 在命令行输入npm install -g grunt-cli

  9. jmeter关联Websocket包支持

    消息文本发送内容采用的是websocket方式进行消息握手的,一次使用到WEBSOCKET包支持 对于它的介绍和使用如下: 一.首先,我们需要准备Jmeter的WebSocket协议的支持插件:JMe ...

  10. getpass模块 ---- optparse

    getpass模块,不回显 常用方法 import getpass password=getpass.getpass('input your password: ').strip() 其他用法 use ...