jQuery select自动选中功能实现方法分析

 更新时间:2016年11月28日 11:45:07   作者:巴霍巴利  
这篇文章主要介绍了jQuery select自动选中功能,结合实例形式分析了jQuery实现select响应与级联菜单显示相关功能与操作技巧,需要的朋友可以参考下

本文实例分析了jQuery select自动选中功能实现方法。分享给大家供大家参考,具体如下:

//筛选
var typeid = "<!--{$typeid}-->";
var bigclassid = "<!--{$bigclassid}-->";
var smallclassid = "<!--{$smallclassid}-->";
$("#typeid option[value="+typeid+"]").attr("selected",true);
$("#typeid").change();
$("#bigclassid option[value="+bigclassid+"]").attr("selected",true);
$("#bigclassid").change();
$("#smallclassid option[value="+smallclassid+"]").attr("selected",true);

获取值后,设置自动选中。

选中之后,调用change()方法。change方法会显示出下一级的select框。然后再选中,再调用change()方法。这样就把三级的select框都显示出来了,并且默认选中了。

$(document).ready(function(){
  //ajax级联
  $("#typeid").change(function(){
    var id = $(this).val();
    setbigclass(id);
  });
  $("#bigclassid").change(function(){
    var id = $(this).val();
    setsmallclass(id);
  });
  $("#screen_submit").click(function(){
    $("#screenform").submit();
  });
});
function setbigclass(id){
    var res = ajaxgetbigclass(id);
    if(res){
      myobj = eval(res);
      var strHtml="<option value=0>全部大类</option>";
      for(var i=0;i<myobj.length;i++){
          strHtml+="<option value='"+myobj[i].id+"'>"+myobj[i].name+"</option>";
      }
      $("#bigclassid").html(strHtml);
      $("#bigclassid").show().change();
    }else{
      $("#bigclassid").html('<option value=""></option>').hide();
      $("#smallclassid").html('<option value=""></option>').hide();
    }
}
function setsmallclass(id){
    var res = ajaxgetsmallclass(id);
    if(res){
      myobj = eval(res);
      var strHtml="<option value=0>全部子类</option>";
      for(var i=0;i<myobj.length;i++){
          strHtml+="<option value='"+myobj[i].id+"'>"+myobj[i].name+"</option>";
      }
      $("#smallclassid").html(strHtml);
      $("#smallclassid").show();
    }else{
      $("#smallclassid").html('').hide();
  }
}

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery表单(form)操作技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结

希望本文所述对大家jQuery程序设计有所帮助。

相关文章

  • Jquery实现$.fn.extend和$.extend函数

    Jquery实现$.fn.extend和$.extend函数

    这篇文章主要介绍了Jquery实现$.fn.extend和$.extend函数的相关资料,需要的朋友可以参考下
    2016-04-04
  • Jquery 方块随着鼠标所在的区域而放大

    Jquery 方块随着鼠标所在的区域而放大

    下面都是默认一样大小的方块,当鼠标放到你想要放的位置,则当前位置的方块则放大。
    2010-05-05
  • 原生JS和jQuery版实现文件上传功能

    原生JS和jQuery版实现文件上传功能

    这篇文章主要介绍了HTML5中用js、jQuery结合Ajax实现文件上传功能,HTML5中已经可以用Ajax上传文件了,而且代码简单,借助 FormData类即可发送文件数据,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • 简单分析javascript面向对象与原型

    简单分析javascript面向对象与原型

    为了说明 JavaScript 是一门彻底的面向对象的语言,首先有必要从面向对象的概念着手 , 探讨一下面向对象中的几个概念:1.一切事物皆对象,2.对象具有封装和继承特性,3.对象与对象之间使用消息通信,各自存在信息隐藏
    2015-05-05
  • 如何使用CSS3和JQuery easing 插件制作绚丽菜单

    如何使用CSS3和JQuery easing 插件制作绚丽菜单

    这篇文章主要介绍了如何使用CSS3和JQuery easing 插件制作绚丽菜单,这样做可以让有菜单的盒子滑出,并且弹出缩略图。在某些菜单项中我们还包含着有进一步链接的子菜单。取决于我们鼠标在菜单项上的停悬,子菜单将向左或向右滑动。,需要的朋友可以参考下
    2019-06-06
  • Jquery的基本对象转换和文档加载用法实例

    Jquery的基本对象转换和文档加载用法实例

    这篇文章主要介绍了Jquery的基本对象转换和文档加载用法,实例分析了Jquery的基本对象转换及文档加载使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • Jquery实现页面加载时弹出对话框代码

    Jquery实现页面加载时弹出对话框代码

    将以下代码置于head标签中即可实现加载时弹出对话框的效果,感兴趣的朋友可以参考下哈,希望可以帮助到你
    2013-04-04
  • jquery学习总结(超级详细)

    jquery学习总结(超级详细)

    本文仅针对jquery的部分知识点做总结,更为全面的可以去官网看中文文档。可以更为详细的了解jquery及其特性。
    2014-09-09
  • jQuery ajax 当async为false时解决同步操作失败的问题

    jQuery ajax 当async为false时解决同步操作失败的问题

    这篇文章主要介绍了 jQuery ajax 当async为false时解决同步操作失败的问题的相关资料,需要的朋友可以参考下
    2016-11-11
  • jQuery+ajax实现局部刷新的两种方法

    jQuery+ajax实现局部刷新的两种方法

    在项目中,经常会用到ajax,比如实现局部刷新,比如需要前后端交互等,这里呢分享局部刷新的两种方法,主要用的是ajax里面的.load()。感兴趣的朋友一起看看吧
    2017-06-06

最新评论