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

如下包含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标签的组合,没有发现存在任何的问题。

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

最新文章

  1. java初始化
  2. Visualize The Workshop
  3. webapi 中的本地登录
  4. VECTOR COMPUTATION
  5. parseInt 和parseFloat 区别
  6. 桌面 透明 三角形 分层窗口 DX
  7. hdu 2037 - 今年暑假不AC(区间调度问题)
  8. 【转】有监督训练 &amp; 无监督训练
  9. 用IDEA调试Play工程
  10. VS2008查看dll导出函数
  11. Nginx配置proxy_pass【转载】
  12. 一天搞定CSS:表单(form)--20
  13. JavaScript创建对象的方法
  14. Softmax函数模型介绍
  15. Java 线性表、栈、队列和优先队列
  16. JavaWeb创建的文件夹默认在tomcat/bin中
  17. webgl 模板缓冲
  18. F - Friends ZOJ - 3710(暴力)
  19. Spring Boot 启用Gzip压缩
  20. SQLSERVER 数据从一张那个表复制到另一张表

热门文章

  1. C# 自己动手实现Spy++(一)
  2. Spring MVC与注解相关的一些配置的方法
  3. python2.7中不同类型之间的比大小
  4. flask 简单的语音识别
  5. Mac下如何用SSH连接远程Linux服务器,centos无法复制粘贴
  6. WPF圆角按钮与触发颜色变化
  7. windows python读取grib2数据
  8. 浮动ip cz
  9. 学习笔记:python3,代码。小例子习作(2017)
  10. spring 之 init-method &amp; InitializingBean