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

如下包含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学习笔记 】name_socpe variable_scope

    [引言]TensorFlow中的命名域是非常重要的概念,涉及到参数共享,方便命名参数管理,定义图结构 本文主要介绍name_scope 和 variable_scope,slim包中的arg_scop ...

  2. root用户以修改文件的方式,修改用户密码

    老早就听说linux的用户密码只是存储在普通的文本文件里,但一直没去了解,今天遇上了需要强行修改的情况... 给碰到个奇葩linux,居然没有passwd命令. 生成密码摘要 openssl pass ...

  3. 查看计算机CPU、内存使用情况

    Shift + Ctrl + Esc,打开Windows任务管理器,点击性能,如图: 可以清楚的看到整台机子的CPU.内存使用情况,其中CPU使用记录下有8个小窗口,因为博主的CPU是8核的,讲讲CP ...

  4. JS中 == ,===, !=, !==的区别

    一个等号是赋值操作,==先转换类型再比较,===先判断类型,如果不是同一类型直接为false. === 判断规则 如果类型不同,就[不相等]  如果两个都是数值,并且是同一个值,那么[相等]:(!例外 ...

  5. day1作业(格式化输出)

    练习:用户输入姓名.年龄.工作.爱好 ,然后打印成以下格式------------ info of Egon -----------Name  : EgonAge   : 22Sex   : male ...

  6. mongo数据库的安装与使用

    下载mongoDB安装包.https://pan.baidu.com/s/1cvSJtc 默认安装.会在系统盘的program Files文件夹下法相一个MongoDB的文件夹,这个就是软件安装的位置 ...

  7. switch的穿透,是参数里包含case内容就执行。

    package rom; import java.lang.*; /* * switch的穿透,是参数里包含case内容就执行. */ public class Xamle_5 { public st ...

  8. 关于php中的exec命令

    这个命令 一般是被禁用的  一些特殊需求的时刻 可以启用 比如 调用系统上的一些数据或者命令 $command ='/www/wwwroot/t.6328.net/Public/cfile/test' ...

  9. python入门-使用API

    python入门-使用API import requests #执行API调用并存储响应 url = 'https://api.github.com/search/repositories?q=lan ...

  10. 2.3在LeetCode中使用我们自定义的类

    在上一节中我们使用的是java提供了的类,这一小节中我们就来学习一下如何在LeetCode中使用我们自定义的类. 其实很简单,我们只需把我们编写的自定义类,拷贝到LeetCode提供的类中,形成类中类 ...