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

如下包含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. RHEL7安装配置VNC

    RHEL7安装配置VNC 作者:Eric 微信:loveoracle11g 安装配置VNC服务程序 [root@zhouwanchun yum.repos.d]# cd ~ [root@zhouwan ...

  2. Chapter3:Qt5布局管理

    3.1分割窗口QSplitter类 QSplitter *splitterMain = new QSplitter(Qt::Horizontal,0); QTextEdit *textLeft = n ...

  3. C#winform抓取百度,Google搜索关键词结果

    基于网站seo,做了一采集百度和Google搜索关键字结果的采集.在这里与大家分享一下 先看先效果图 代码附加:  1   private void baidu_Click(object sender ...

  4. redis 的简单用法

    使用  :下载完后 打开任务管理器 把redis_server 进程关掉, 切换到   E:\redis 中 redis-server.exe redis.windows.conf 打开一个 cmd ...

  5. Linux free -m 详解命令

    如下显示free是显示的当前内存的使用,-m的意思是M字节来显示内容.我们来一起看看. 1 2 3 4 5 6 $ free -m                total       used    ...

  6. Linux中使用python测试主机存活 Linux系统CentOS Linux release 7.3.1611 (Core) py版本Python 2.7.5

    下面是最初的情况 #/usr/bin/env python # -*- coding: utf-8 -*- import os import time import subprocess import ...

  7. [PHP-DI] 理解依赖注入

    理解依赖注入 依赖注入 和 依赖注入容器 是不同的: 依赖注入 (Dependency injection) 是编写更好代码的一种方法 容器 (Container) 是帮助注入依赖关系的工具 你不需要 ...

  8. uva-10714-贪心

    题意:有一条杆,长度为L,上面很几只蚂蚁,蚂蚁的朝向未知,爬速1cm/s,在爬行过程中,蚂蚁相撞了就往反方向爬,问,杆上没有蚂蚁至少要多久,至多要多久 解题思路: 蚂蚁1和蚂蚁2相撞,我们只要交换一下 ...

  9. HPROF - Heap Profile

    基于动态链接库实现,可用于性能分析,锁内容.诊断memory leak问题等.获得堆开辟信息 java -agentlib:hprof=heap=sites ToBeProfiledClass 帮助文 ...

  10. SPARK执行流程

    RDD运行原理 1.创建 RDD 对象 2.DAGScheduler模块介入运算,计算RDD之间的依赖关系.RDD之间的依赖关系就形成了DAG 3.每一个JOB被分为多个Stage,划分Stage的一 ...