十一、select2實現下拉選單

阿新 • • 發佈：2019-02-11

html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="/static/js/jquery-2.1.0.js"></script>
    <link rel="stylesheet" href="/static/css/select2.min.css">
    <script type="text/javascript" src="/static/js/select2.full.js" 
></script>
    <script type="text/javascript" src="/static/js/json2.js"></script>
</head>
<body>
    <div>
        <div class="mycontainer">
            <table width="50%">
                <tr>
                    <td width="50%">組：
                        <select 
 id="group" name="group" style="width: 70%">
                        </select>
                    </td>
                    <td width="=50%">成員：
                        <select id="tester" name="tester" style="width: 70%">
                        </select>
                    </td 
>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

javascript：

<script>
$('#group').select2({
    placeholder: 'select a group',
    ajax: {
        url: "/group",
        dataType: 'json',
        processResults: function(data) {
            return {
                results: $.map(data, function(item) {
                    return {
                        text: item.text,
                        id: item.id
                    }
                })
            };
        },
    }
});

$('#tester').select2({
    placeholder: 'select a tester'
}); 

// group被選擇時，tester從後臺獲取資料並展示到前端
$('#group').on('select2:select', function(evt) {
    //清空select2的options
    $("#tester").empty();
    $('#tester').select2({
        placeholder: 'select a tester',
        ajax: {
            url: "/tester",
            type: 'get',
            dataType: 'json',
            data: {
                'group': $("#select2-group-container").html()
            },
            processResults: function(data) {
                return {
                    results: $.map(data, function(item) {
                        return {
                            text: item.text,
                            id: item.id
                        }
                    })
                };
            },
        }
    });
});
</script>

效果如下：
下拉選單效果圖

十一、select2實現下拉選單

html： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <s

純CSS、原生JS、jQuery實現下拉選單功能

一、純CSS實現實現下拉選單需要用display，即改變display的block或none值。先構建基本的HTML框架， <div id="nav"> <ul> <li><a href="#">

ionic學習（十一）：頁面下拉重新整理(Refresher)

官網參考： https://ionicframework.com/docs/api/components/refresher/Refresher/ 用法說明：在html頁面需要下拉重新整理的位置新增如下程式碼：

實現下拉選單多選框效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <li>工作意願地： <%-- <c:forEach items="${list}" var="lis

css實現下拉選單

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> ul{ list-style: none

學習“javaScript+CSS+DIV實現下拉選單，實現表格變色”內容的筆記

實現下拉選單 <!DOCTYPE html> <html> <head> <title>下拉選單示例</title> <script language="javaScript">

用CSS實現下拉選單功能(過於冗餘，此方法不建議)

bootstrap實現下拉選單需要的連結引入

我理解的bootstrap框架就是定義了一些常用HTML元素的樣式，把bootstrap包匯入到HTML後，不必自己定義樣式，可以直接引用定義好的樣式。我理解bootstrap框架就是定義了一些常用HTML元素的樣式，把bootstrap包匯入到HTML後，不必自

微信小程式實現下拉選單

點選對應上面的tab選中 <view class='nav-wrapper'> <view class='nav-container'> <view class="scroll_box"> <scroll-view cla

用PopupWindow實現下拉選單

首先附上效果圖首先寫好佈局檔案，一共四個分別為:activity_main.xml 主介面佈局，header.xml 裡面其實也就一個選單Button 待會要放到主佈局中，list.xml放置lisetView的佈局檔案，list_item.xml ListVie

用JS實現下拉選單的聯動

需求：用JS實現一個下拉選單，要求在選中“地區”選單中相應的地區時，自動在“國家”選單中出現相應的國家。 <!DOCTYPE html> <html> <head&g

js實現下拉選單提交表單後停留在選中option

<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html

css實現下拉選單以及下拉箭頭旋轉效果

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>下拉選單動畫製作</title><style>*{margin:0;pa

Android使用控制元件Spinner實現下拉選單列表

實現效果如下： 1.實現程式碼 package com.example.testspanner; import java.util.ArrayList; import java.util.Li

純CSS實現下拉選單導航

前言：本題是網易雲課堂的前端微專業《頁面製作》課程的作業題，當時對題意理解錯誤沒有實現題目要求，成了心中永遠的痛，所謂念念不忘必有迴響，在學校圖書館花了幾個小時做出來並對相關知識點進行了總結，寫了這篇博文。好，進入正題。－－－－－－－－－－－－－－－－

詳解Bootstrap中JS外掛實現下拉選單效果

在編寫網站過程中，導航條中下拉選單功能十分常見。那麼，今天就分享一下關於如何通過Bootstrap中JS外掛來實現下拉選單功能。在官方文件中是這麼形容下拉選單外掛的翻譯過來就是：通過此外掛您可以為幾乎所有東西新增下拉選單

IOS使用UItableView實現下拉選單元件（UITableView的使用方法）

一. 基礎版本在登陸介面有時需要儲存已經登陸的賬號資訊，可以點開一個下拉選單選擇儲存的賬號，這裡是用UIKit的表格元件編寫一個下拉選單元件demo，實現思路如下： 1.首先在一個UIViewController裡放一個按鈕或者標籤框，用來顯示當

js實現下拉選單

效果：平時在網頁上經常會看到導航欄在滑鼠經過時，字型顏色和背景會改變，然後會顯示下拉選單。原理：js實現在滑鼠經過時，改變字型的顏色和背景，然後下拉選單顯示。一般情況下，下拉選單處於隱藏的狀態。

JQ實現下拉選單

js: <script type="text/javascript"> $(function() { var _this1 = null; $('.nav>li').hover(function() { _this1 = $(this);

struts2中用jquery、ajax實現下拉框的級聯

–這是剛學會的一個，從action中傳出json型別資料的字串，然後通過ajax再把字串解析出json物件。下面是大致的步驟。 1、post.jsp頁面在js中加入函式程式碼 <

十一、select2實現下拉選單

相關推薦