2. 程式人生 > >HTML:使用Jquery動態生成二級選項列表

HTML:使用Jquery動態生成二級選項列表

阿新 • • 發佈：2018-11-12

 

想寫一個多級聯動的選項列表，並且我想要動態生成，但是我看了好多部落格看得我暈乎乎的，就自己查了一些jq 的方法自己嘗試些了一下，下面放上我實現的效果和原始碼

 

實現效果：

 

原始碼：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>

        <!--引入jquery框架-->
        <script src="
 
js/jquery-3.3.1.min.js" type="text/javascript"></script>

        <script type="text/javascript">
            //            在函式中新增選項列表聯動的事件
            $(function() {
                //                定義兩個陣列,既然是二級聯動的列表,那麼第二個列表肯定就是二維的了,也就是下面的city陣列
                var pro = ['省份一', '省份二', '省份三
 
'];
                var city = [
                    ['1', '2', '3'],
                    ['4', '5'],
                    ['6']
                ];

                //使用一個for迴圈設定好省份的選項列表,這一步比較簡單,邏輯也比較清晰
                //                append():新增選項
                //                val():返回當前選項值
                
 
//                html():給返回的當前選項新增內容
                for(var i = 0; i < pro.length; i++) {
                    $("#pp").append($("<option></option>").val(i + 1).html(pro[i]));
                }

                //                這裡是監聽第一個選項列表的改變事件, 也就是當我們選中省份中的某一項時, 第二個列表會顯示出相對應的城市名字
                $('#pp').change(function() {
                    //定義一個變數,存放選中的項是第幾項,然後減去一個1作為二維陣列的下標
                    var index = $(this).val() - 1;
//                    設定屬性值
                    $("#cc").prop("length", 1);

                    for(var i = 0; i < city[index].length; i++) {
                        $("#cc").append($("<option></option>").val(i + 1).html(city[index][i]));

                    }

                })

            })
        </script>

    </head>

    <body>

        <!--先在body中定義好連個下拉列表-->
        <select id="pp">
            <option selected="selected">請選擇</option>

        </select>

        <select id="cc">
            <option selected="selected">請選擇</option>

        </select>

    </body>

</html>

 

相關推薦

HTML:使用Jquery動態生成二級選項列表

  想寫一個多級聯動的選項列表，並且我想要動態生成，但是我看了好多部落格看得我暈乎乎的，就自己查了一些jq 的方法自己嘗試些了一下，下面放上我實現的效果和原始碼   實現效果：   原始碼： <!DOCTYPE html> <html>

jQuery動態新增下拉列表選項

不說了，直接上程式碼： <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String

jquery 動態生成html5列表項以及header，footer的固定，居中排列

在開發跨平臺移動應用中，由於資料動態更新，所以列表項需要動態生成，查了很多資料，以下方法親測可用 html5程式碼 <div data-role="page" id="index" >

如何將jquery動態生成的數據綁定事件

code 運行 function splay jquer use ffffff -m find 　必須要使用事件綁定！ 　我使用on事件綁定 父級元素在on時間之前 之後你需要綁定事件的子元素 $(‘.photo-main‘).on(‘mouseenter‘,‘.

jquery動態生成button的點擊事件

.com button 無效 ima image fun com 點擊 alt 先為button設置onclick事件，對應函數，之後定義函數。 $("#pic2").click(function (){...} 無效。 jquery動態生成butt

jQuery 動態生成on的繫結事件

該段程式碼實現的是穿梭框： // on的繫結事件傳引數 var clickEven = [ {id:"#demo01",class:".class0",list:"#demo02"}, {id:"#demo02",class:".class0",lis

npoi根據html字串動態生成excel模板

npoi多表頭資料匯出目前有兩種方法： 其一是根據excel模板來匯出資料 其二是npoi動態建立多表頭 上面的兩種方法我都用過今天我介紹的是根據html字串來建立excel，但是要設定響應的屬性， 其實也就是對應 npoi CellRangeAddress 方法所需要的四個引數(firstrow,l

根據html模板動態生成html

public class GeneratingHTML {     /**      * 讀取HTML檔案      *@param filePath      *@return

jQuery動態生成的元素如何繫結事件

 這段時間在寫程式碼的時候遇到一個問題，通過append()新增的節點，點選事件不起作用。當時我百思不得其解，各種找錯都沒找到錯誤的原因。後來才發現是動態生成節點的問題，還是自己沒有經驗啊。   下面來

動態生成下拉列表

使用DOM及誒動態生成select下拉列表 用陣列儲存下拉列表的資料內容 使用一個按鈕控制載入下拉列表中的內容 原html程式碼 <html> <head> <title>動態生成下拉列表資料</title&

JQuery動態生成Table表格

http://www.cnblogs.com/scy251147/archive/2010/11/30/1892411.html 主要用到了JQuery中的append和appendto的方法,具體程式碼如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 1

Jquery 動態生成li標籤以及單擊事件的繫結

$("#rightRes").append("<li margin-top:3px;margin-left:10px; value="+i+">名稱:" +"<br/>電話:"+"</li>");//動態生成 $('div').chi

jquery 動態生成表 繫結click事件，獲取同行資料

這個問題糾結了好久，動態生成的表格，直接按照普通方式，onclick=“afun();”  無法在function內獲取到正確的this，就無法獲取表格其他項資料。繫結也無法成功，直接沒反應。 後來debug了一下，感覺jquery繫結事件實在載入前進行的，此時還沒有動態生

HTML中動態生成內容的事件繫結問題

        在實際開發過程中，有時需要向頁面中動態的插入html內容，並在插入的節點中繫結事件處理函式。         用Javascript向HTML文件中插入內容，有兩種方法，一種是JS建立節點，然後插入到html中；另外一種是通過ajax非同步載入的方式，從伺服

jQuery 動態生成多個表格

html程式碼 <div id="di" style="display:none;height: 400px;overflow-y: scroll;padding-top: 0px;">

jquery 動態生成的元素 click不生效

例如我的html文件中已經有了一個id為parent的div，我將要在這個div內部再動態新增一個class為son的span，然

jQuery獲取動態生成的元素

fun ast tails 生成 console ron sni 獲取 data 需求描寫敘述：頁面上能夠動態加入數據,比方table,點擊按鈕能夠動態加入行。又或頁面載入時table數據是通過ajax從後臺獲取的。而這時我們想要獲取當中的某個值,又該怎樣獲取呢？假設是

關於jQuery中動態生成的點擊事件觸發兩次的討論

get com pan .html 方法 執行 url wall itl 由於是動態生成的 點擊事件運用了jQuery裏面的on()方法，綁定在body上面，結果在程序裏面運行了兩次。參考了博客 利用on和off方法編寫高效的js代碼知道了很多在dom對象刪除以後，其聲明

利用jquery.ajax在jsp頁面動態生成table，可以增加修改，並支持一行和多行刪除

分享 ica 圖片 PE sibling 多行 點擊 table 技術 聲明：此為本人原創，只想實現功能，界面樣式方面沒多考慮，很粗糙能看懂就行……2018-5-14 動態生成table，我利用jsp內嵌java代碼從後臺獲取對象集合，輸出的時候有2中方法 1.直接利用

【轉載】動態生成html元素並為元素追加屬性

追加內容 min utf-8 color meta rep lin type ctype 動態生成HTML元素的方法有三種： 第一種：document.createElement()創建元素，再用appendChild( )方法將元素添加到指定節點 1 <!DOC