2. 程式人生 > >select簡單2級聯動

select簡單2級聯動

阿新 • • 發佈：2019-01-18

是否還被遊戲服務區的選擇而驚歎？是否還被選擇框的自動生成而詫異？其實一切都是“紙老虎”！
在這裡U can do it！
首先，在select中，value和text的區別在於：value是客戶看不見的值；而text是客戶可以看見的值。也就是說二級聯動（比如常見的選擇不同的省份有不同的地區）是在你改變了省份之後，觸發事件，傳遞對應的value給第二級，第二級的select根據你傳遞的value改變了自己的text值。以此類推，向下傳遞。
好了上程式碼！

<!doctype html>
<html>
<head>
<meta charset
 
="utf-8">
<title>聯動</title>
</head>

<body>
<select id="s1" onChange="move()">
<!-- 根據id獲取value，onchange（）觸發函式move（）修改二級select的text值實現聯動 -->
  <option selected value="s1">-- 請選擇 --</option>
  <!--預設選中-->
  <option  value="SC">SC</option>
 

  <option   value="BJ">BJ</option>
  <option   value="TJ">TJ</option>
</select>
<select id="s2">
   <option selected>-- 請選擇 --</option>
   <!--預設選中，動態生成option -->
</select>
<script>
     function move()
     {
         var s1=document.getElementById("s1"
 
);
         var s2=document.getElementById("s2");
         <!-- 獲取一級和二級的屬性-->
         var add;
         if(s1.value=="SC")
         {
             add=new Array("CD","DZ","MY","NC");
             <!--比對value值，實現對應二級text值的動態生成-->
         }else if(s1.value=="BJ")
         {
         add=new Array("HD","CY","WFJ");
<!--比對value值，實現對應二級text值的動態生成-->
         }else if(s1.value=="TJ")
         {
             add=new Array("TJG","TJ","TJY");
             <!--比對value值，實現對應二級text值的動態生成-->
           }else if(s1.value=="s1")
          {
              add=new Array("請選擇");
            }
          else
          {
         add=null;
         <!--若沒有就為空，當然不可能出現的-->
          }

          s2.length=0;
          for(var i=0;i<add.length;i++)
          {
              var ss=new Option();
              ss.text=add[i].split()[0];

              s2.add(ss);
              <!--把text值新增到二級select中，顯示出來-->
          }

     }
</script>
</body>
</html>

效果如下：
這裡寫圖片描述
選擇BJ：
這裡寫圖片描述
選擇“請選擇”：
這裡寫圖片描述
完事，如果想都多級聯動以此類推。（比如國家，省份，地區等等）
這裡寫圖片描述
歡迎留言[email protected]
SchopenhauerZhang
(For Communication Techology)

相關推薦

select簡單2級聯動

是否還被遊戲服務區的選擇而驚歎？是否還被選擇框的自動生成而詫異？其實一切都是“紙老虎”！ 在這裡U can do it！ 首先，在select中，value和text的區別在於：value是客戶看

2級聯動

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, init

將一個2級聯動的資料用表格的形式顯示出來

 //生成列表  function getXctype(p_value){var p_listArray=getListByPvalue(p_value);//獲取大類列表var s_listArray=new Array(p_listArray.length);//生成儲存子列表的集合//迴圈大類列表，獲

ThinkPHP + Ajax 實現2級聯動下拉選單

首先是資料庫的設計。分類表叫cate. 我做的是分類資料的二級聯動，資料需要的欄位有：id,name(中文名),pid(父id). 父id的設定: 若資料沒有上一級，則父id為0，若有上級，則父id為上一級的id。 資料庫有內容後，就可以開始寫程式碼，進行二級聯動的實現。

jquery+php實現select聯動效果(兩級聯動)

HTML程式碼： <div class="form-group">

兩級聯動下拉框的簡單實現

最近經常用到二級選單的情況，改變一個另一個跟著變化。自己寫了一個簡單的JSP頁面，大家給點意見，另外大家這種情況都是怎麼做的，當然Ajax除外！[code]<%! public final String _JS_GET_METHOD_NAME="_do_get_seco

簡單的兩級聯動ajax載入省市

//新新增修改的時候繫結省市 jquery Code： //ajax繫結省s $(function(){ var prov = '${tour.prov}'; $.ajax({ url: "./listProv.jspx",

jquery $.post() 向php傳值 實現簡單的二級聯動

chang var box jquer lec 簡單 cnblogs encode can 1 其中selectid是一個下拉菜單的id 2 3 $().ready(function () { 4 $("#selectid").change(functi

有n級臺階，每次爬1或者2級臺階，用程序計算有多少種爬法

stat cnblogs 計算 多少 bsp span 方法 每次 spa 1.遞歸的方法： private static int Max(int i) { if (i<=2) { return i; }

一個簡單的三級聯動

end http nbsp edi val mage append document doc 一個簡單的三級聯動。 <div class="editInput"> <select id="province"><option&g

翻譯（六）——T-SQL的進階之路：超過基礎的2級水平：寫子查詢

相關 完整 圖像 reg 想要 試驗 releases 驗證 不用 T-SQL的進階之路：超過基礎的2級水平：寫子查詢 格雷戈裏·拉森(Gregory Larsen)，2016/01/01(第一次出版:2014/01/29) 該系列 這篇文章是樓梯系列的

仿ios的省市縣3級聯動腳本一

可選 value 標題 圖片 default 空格 數據 cti happy 一，圖片實例 二，代碼 2.1，代碼 $(‘#provinceCity_fu‘).click(function(){ var $this = $(this); new Picke

ajax_get/post_兩級聯動

表示 城市 load 返回 soft ava catch true ml2 使用ajax實現菜單聯動 通常情況下，GET請求用於從服務器上獲取數據，POST請求用於向服務器發送數據。 需求：選擇第一個下拉框的值，根據第一個下拉框的值顯示第二個下拉框的值 首先使用G

SQL Server代理的階梯 - 第2級：作業步驟和子系列

backup 叫我 標記 指定 jobs microsoft 有效 soft 開發 作者：Richard Waymire，2017/10/11（第一版：2011/02/17） 原文鏈接：http://www.sqlservercentral.com/articles/SQL

SQL中的SELECT 簡單查詢語句總結

clas 識別 結果集 -i ear get int 一個 lec --scott用戶不能使用，使用system登錄--修改用戶scott賬戶解鎖ALTER USER SCOTT ACCOUNT UNLOCK;--重新設置密碼identified被識別的alter user

一只青蛙一次可以跳上1級臺階，也可以跳上2級。求該青蛙跳上一個n級的臺階總共有多少種跳法。

就是 回歸 數列求和 AR 得出 for post 可能性 ... 斐波那契數列指的是這樣一個數列： 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233，377，610，987，1597，2584，4181，6765，1094

SuSE11安裝MySQL5.1.73：RPM安裝方式（超簡單入門級安裝）

databases ade 環境 bsp run schema input comm evel 註：此安裝過程只有關鍵步驟，僅適合入門學習使用一、 環境準備 64位操作系統，SuSE版本11sp3。（註：kingtry是我的主機名）kingtry:~ # uname

js之select標簽---省市聯動小例子

asc name attr == ima 選擇 jos chan ava select標簽 運用json和二維數組來實現選擇標簽的省市聯動選擇，看圖 當沒有選擇省的時候 只能看到省，沒有選擇省的時候，城市是沒有的 當點擊一個省後，再點擊城市就會有該省的城市 代碼兩種方

ajax 2級級聯下拉框

js function getqhlx(){       var business = $("#business").val();      // business = $("#business").find("option:selec

【無事水一發】ExtJS4 Ext.tree.Panel (無限層級)帶複選框樹勾選(父級子級)聯動程式碼

原創，轉載請註明出處~~ 勾選父節點，之下所有子節點自動勾選；反之自動取消子節點勾選（無限層級） 勾選所有子節點，父節點自動勾選；反之自動取消父節點勾選（無限層級） Ext.onReady(function() { var store = Ext.create('Ext.data