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


Posted in Javascript onNovember 28, 2016

本文实例分析了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程序设计有所帮助。

Javascript 相关文章推荐
js触发select onchange事件的小技巧
Aug 05 Javascript
七夕情人节丘比特射箭小游戏
Aug 20 Javascript
微信小程序 教程之引用
Oct 18 Javascript
微信小程序之购物车功能
Sep 23 Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
Oct 16 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
详解利用Angular实现多团队模块化SPA开发框架
Nov 27 Javascript
javascript获取图片的top N主色值方法详解
Jan 26 Javascript
Webpack 4.x搭建react开发环境的方法步骤
Aug 15 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
vue过滤器实现日期格式化的案例分析
Jul 02 Javascript
JS两种类型的表单提交方法实例分析
Nov 28 #Javascript
简单实现JavaScript图片切换效果
Nov 28 #Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 #Javascript
JS调用打印机功能简单示例
Nov 28 #Javascript
完全深入学习Bootstrap表单
Nov 28 #Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 #Javascript
Bootstrap选项卡动态切换效果
Nov 28 #Javascript
You might like
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
PHP禁止页面缓存的代码
2011/10/23 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
PhpStorm配置Xdebug调试的方法步骤
2019/02/02 PHP
php intval函数用法总结
2019/04/14 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
JS Range HTML文档/文字内容选中、库及应用介绍
2011/05/12 Javascript
JavaScript获取table中某一列的值的方法
2014/05/06 Javascript
js中取得变量绝对值的方法
2015/01/03 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
2019/10/11 Javascript
vue引用外部JS的两种种方法
2020/01/28 Javascript
js抽奖转盘实现方法分析
2020/05/16 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
Python使用scrapy抓取网站sitemap信息的方法
2015/04/08 Python
Python 3.x 新特性及10大变化
2015/06/12 Python
在Mac OS系统上安装Python的Pillow库的教程
2015/11/20 Python
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
Python之修改图片像素值的方法
2019/07/03 Python
Python字节单位转换实例
2019/12/05 Python
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
给护士表扬信
2014/01/19 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
团员个人总结
2015/02/26 职场文书
小学生五一劳动节演讲稿
2015/03/18 职场文书
小爸爸观后感
2015/06/15 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
重阳节主题班会
2015/08/17 职场文书
利用Python判断整数是否是回文数的3种方法总结
2021/07/07 Python