jQuery select自動(dòng)選中功能實(shí)現(xiàn)方法分析

更新時(shí)間：2016年11月28日 11:45:07 作者：巴霍巴利

這篇文章主要介紹了jQuery select自動(dòng)選中功能,結(jié)合實(shí)例形式分析了jQuery實(shí)現(xiàn)select響應(yīng)與級(jí)聯(lián)菜單顯示相關(guān)功能與操作技巧,需要的朋友可以參考下

本文實(shí)例分析了jQuery select自動(dòng)選中功能實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：

//篩選
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);

獲取值后，設(shè)置自動(dòng)選中。

選中之后，調(diào)用change()方法。change方法會(huì)顯示出下一級(jí)的select框。然后再選中，再調(diào)用change()方法。這樣就把三級(jí)的select框都顯示出來了，并且默認(rèn)選中了。

$(document).ready(function(){
  //ajax級(jí)聯(lián)
  $("#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();
  }
}

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery表單(form)操作技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery遍歷算法與技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

Jquery實(shí)現(xiàn)$.fn.extend和$.extend函數(shù)
這篇文章主要介紹了Jquery實(shí)現(xiàn)$.fn.extend和$.extend函數(shù)的相關(guān)資料,需要的朋友可以參考下
2016-04-04
Jquery 方塊隨著鼠標(biāo)所在的區(qū)域而放大
下面都是默認(rèn)一樣大小的方塊，當(dāng)鼠標(biāo)放到你想要放的位置，則當(dāng)前位置的方塊則放大。
2010-05-05
原生JS和jQuery版實(shí)現(xiàn)文件上傳功能
這篇文章主要介紹了HTML5中用js、jQuery結(jié)合Ajax實(shí)現(xiàn)文件上傳功能，HTML5中已經(jīng)可以用Ajax上傳文件了，而且代碼簡(jiǎn)單，借助 FormData類即可發(fā)送文件數(shù)據(jù)，感興趣的小伙伴們可以參考一下
2016-04-04
簡(jiǎn)單分析javascript面向?qū)ο笈c原型
為了說明 JavaScript 是一門徹底的面向?qū)ο蟮恼Z(yǔ)言，首先有必要從面向?qū)ο蟮母拍钪?, 探討一下面向?qū)ο笾械膸讉€(gè)概念：1.一切事物皆對(duì)象，2.對(duì)象具有封裝和繼承特性，3.對(duì)象與對(duì)象之間使用消息通信，各自存在信息隱藏
2015-05-05
如何使用CSS3和JQuery easing 插件制作絢麗菜單
這篇文章主要介紹了如何使用CSS3和JQuery easing 插件制作絢麗菜單，這樣做可以讓有菜單的盒子滑出，并且彈出縮略圖。在某些菜單項(xiàng)中我們還包含著有進(jìn)一步鏈接的子菜單。取決于我們鼠標(biāo)在菜單項(xiàng)上的停懸，子菜單將向左或向右滑動(dòng)。,需要的朋友可以參考下
2019-06-06
Jquery的基本對(duì)象轉(zhuǎn)換和文檔加載用法實(shí)例
這篇文章主要介紹了Jquery的基本對(duì)象轉(zhuǎn)換和文檔加載用法,實(shí)例分析了Jquery的基本對(duì)象轉(zhuǎn)換及文檔加載使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02
Jquery實(shí)現(xiàn)頁(yè)面加載時(shí)彈出對(duì)話框代碼
將以下代碼置于head標(biāo)簽中即可實(shí)現(xiàn)加載時(shí)彈出對(duì)話框的效果，感興趣的朋友可以參考下哈，希望可以幫助到你
2013-04-04
jquery學(xué)習(xí)總結(jié)（超級(jí)詳細(xì)）
本文僅針對(duì)jquery的部分知識(shí)點(diǎn)做總結(jié)，更為全面的可以去官網(wǎng)看中文文檔。可以更為詳細(xì)的了解jquery及其特性。
2014-09-09
jQuery ajax 當(dāng)async為false時(shí)解決同步操作失敗的問題
這篇文章主要介紹了 jQuery ajax 當(dāng)async為false時(shí)解決同步操作失敗的問題的相關(guān)資料,需要的朋友可以參考下
2016-11-11
jQuery+ajax實(shí)現(xiàn)局部刷新的兩種方法
在項(xiàng)目中，經(jīng)常會(huì)用到ajax，比如實(shí)現(xiàn)局部刷新，比如需要前后端交互等，這里呢分享局部刷新的兩種方法，主要用的是ajax里面的.load()。感興趣的朋友一起看看吧
2017-06-06