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 相关文章推荐
动态显示可输入的字数提示还可以输入的字数
Apr 01 Javascript
JavaScript转换二进制编码为ASCII码的方法
Apr 16 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 Javascript
jQuery Checkbox 全选 反选的简单实例
Nov 29 Javascript
three.js快速入门【推荐】
Jan 21 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
在React 组件中使用Echarts的示例代码
Nov 08 Javascript
在Swiper内如何制作CSS3动画效果示例代码
Dec 07 Javascript
vue2.0 中使用transition实现动画效果使用心得
Aug 13 Javascript
在vue中使用v-bind:class的选项卡方法
Sep 27 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
Mar 07 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
Mar 06 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
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
node在两个div之间移动,用ztree实现
2013/03/06 Javascript
jquery阻止冒泡事件使用模拟事件
2013/09/06 Javascript
jquery插件qrcode在线生成二维码
2015/04/26 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
DOM 事件的深入浅出(二)
2016/12/05 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
浅谈vue中慎用style的scoped属性
2017/11/28 Javascript
Angular实现的简单定时器功能示例
2017/12/28 Javascript
Python实现从脚本里运行scrapy的方法
2015/04/07 Python
详解Python中的相对导入和绝对导入
2017/01/06 Python
深入浅出分析Python装饰器用法
2017/07/28 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
python Django 反向访问器的外键冲突解决
2020/05/20 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
html5 canvas 使用示例
2010/10/22 HTML / CSS
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
英国最大的婴儿监视器网上商店:Baby Monitors Direct
2018/04/24 全球购物
配置管理计划的主要内容有哪些
2014/06/20 面试题
房屋租赁合同解除协议书
2014/10/11 职场文书
收款委托书
2014/10/14 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
横空出世观后感
2015/06/09 职场文书
初中信息技术教学反思
2016/02/16 职场文书
Redis持久化与主从复制的实践
2021/04/27 Redis
Opencv实现二维直方图的计算及绘制
2021/07/21 Python