首頁 > 網際網路

怎麼根據下拉式選單的值彈出不同的介面

2019-12-11 17:55:22

怎麼根據下拉式選單的值彈出不同的介面

使用html 和jquery來演示

1

使用visual studio code


2

新建一個html檔案


3

建立一個下拉選單


4

我們在下拉選單中,新增3個下拉選單項

<option value="1">介面1</option>

<option value="2">介面2</option>

<option value="3">介面3</option>


5

在頁面中引入jquery

如果不想下載js檔案,可以引入CDN


6

編寫jquery

根據我們選擇的不同的下拉選單的值來顯示不同的介面

這裡為了演示我們使用不同的顏色來代表不同的介面

介面1 使用blue

介面2 使用yellow

介面3 使用gray

我們定義三個style來區別


7

顏色的程式碼如下

.blue {

background-color: lightskyblue;

}

.yellow {

background-color: yellow;

}

.gray {

background-color: gray;

}


8

撰寫下拉選擇的切換邏輯

為了便於演示,我們在下拉選單中在新增一個請選擇的專案


9

建立一個介面框

簡單的使用一個div來演示


10

一開始的畫面效果如下


11

撰寫下拉選單的邏輯

使用不同的顏色來代表不同的介面

<script type="text/javascript">

$(function () {

$("select").on("change", function () {

console.log($(this).val());

switch ($(this).val()) {

case "1": // 介面1

$("#content p").text($("select option:selected").text());

$("#content").addClass("blue");

break;

case "2": // 介面2

$("#content p").text($("select option:selected").text());

$("#content").addClass("yellow");

break;

case "3": // 介面3

$("#content p").text($("select option:selected").text());

$("#content").addClass("gray");

break;

default:

$("#content").removeClass();

$("#content p").text("");

break;

}

});

});

</script>


12

接下來就看是演示

當我們選擇介面1時,就會呈現藍色框


13

當我們選擇介面2時,就會呈現黃色框


14

當我們選擇介面3時,就會呈現灰色框


15

完整的程式碼如下<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><script src="http://code.jquery.com/jquery-2.1.1.min.js"></script></head><style>#content {border-width: 1px;border-style: solid;border-color: cornflowerblue;width: 300px;height: 300px;}#conten
t p{text-align:center;}.blue {background-color: lightskyblue;}.yellow {background-color: yellow;}.gray {background-color: gray;}</style><body><select><option value="">請選擇</option><option value="1">介面1</option><option value="2">介面2</option><option value="3">介面3</option></select><div id="content"><p></p></div><script type="text/javascript">$(function () {$("select").on("change", function () {console.log($(this).val());switch ($(this).val()) {case "1": // 介面1$("#content p").text($("select option:selected").text());$("#content").addClass("blue");break;case "2": // 介面2$("#content p").text($("select option:selected").text());$("#content").addClass("yellow");break;case "3": // 介面3$("#content p").text($("select option:selected").text());$("#content").addClass("gray");break;default:$("#content").removeClass();$("#content p").text("");break;}});});</script></body></html>
background-color: gray;}</style><body><select><option value="">請選擇</option><option value="1">介面1</option><option value="2">介面2</option><option value="3">介面3</option></select><div id="content"><p></p></div><script type="text/javascript">$(function () {$("select").on("change", function () {console.log($(this).val());switch ($(this).val()) {case "1": // 介面1$("#content p").text($("select option:selected").text());$("#content").addClass("blue");break;case "2": // 介面2$("#content p").text($("select option:selected").text());$("#content").addClass("yellow");break;case "3": // 介面3$("#content p").text($("select option:selected").text());$("#content").addClass("gray");break;default:$("#content").removeClass();$("#content p").text("");break;}});});</script></body></html>

相關文章

  • 星海爭霸2（新手免費全功能啟用碼）141231更新 星海爭霸2（新手免費全功能啟用碼）141231更新

    星海爭霸21全功能兌換碼新手獎勵1、7小時遊戲時間（14天內）解除所有試玩版本限制直到7小時耗盡，如種族、匹配模式、戰役、地圖等詳細資訊(150119更新)4505624695013984483730049

    2020-11-30 03:45:43

  • 決勝時刻戰區國際服註冊方法 決勝時刻戰區國際服註冊方法

    我們經常會玩決勝時刻戰區遊戲，但是有很多朋友不知道決勝時刻戰區國際服註冊方法，下面就詳細說下決勝時刻戰區國際服註冊方法。1首先我們開啟自己電腦中的瀏覽器，比如360瀏覽器

    2020-11-29 16:08:59

  • 決勝時刻黑色行動4怎麼下載 決勝時刻黑色行動4怎麼下載

    決勝時刻黑色行動4的應用獲取的方法。1準備好網路的網速，開啟瀏覽器的頁面。 2決勝時刻黑色行動4將其輸入到搜尋頁中，點選搜尋。 3選擇圖中展示的決勝時刻黑色行動4中文版網頁

    2020-11-29 16:06:30

  • 決勝時刻6怎麼安裝 決勝時刻6怎麼安裝

    決勝時刻是一個很好玩的遊戲，但是安裝過程比較困難，下面小編和你分享一下經驗！ 1一般有很多個壓縮檔案的那種，任意解壓一個壓縮包之後會生成一個映象用虛擬光碟機載入，之後按用光

    2020-11-29 10:07:32

  • 決勝時刻9BO2.怎麼安裝 決勝時刻9BO2.怎麼安裝

    小編教你決勝時刻9BO2.怎麼安裝，希望你的生活多姿多彩~ 1首先，你買的基本可以確定，是盜版，或者說所謂的偽正版——同學，多去steam吧或者戰地3吧看一看，會提高你對盜版/偽正版的鑑

    2020-11-29 05:49:58

  • 決勝時刻10設定中文 決勝時刻10設定中文

    目前很多決勝時刻的玩家都在找版本10的中文版，其實現在正版的當中還沒有中文，退而求其次吧，小編這裡分享一些貼圖大家參考一下 1基礎選單，直接看圖片吧 2基礎選單，直接看圖片吧 3

    2020-11-29 05:29:49

IT145.com E-mail:sddin#qq.com