{Day19} 小公主訂單網頁嘗試集＿第十九集＿javascript下拉式選單

2022 iThome 鐵人賽

DAY 19

Modern Web

訂單網頁嘗試集系列第 19 篇

14th鐵人賽網頁教學網頁設計

icetong

2022-10-04 17:48:25

413 瀏覽

分享至

今天是豔陽高照的星期二，我們前面都著重在各功能的講解與實作，好像都忘記訂單ㄌ....?
所以開始介紹些訂單會使用的功能之一吧

下拉式選單

下拉式選單為選取數量的優秀選項，尤其有限購的限量商品。

html
select 標籤的id 為 list。
建立下拉式選單。select 標籤中有三個選項，選項都使用drop-down為類別名稱。
最後，我們將連結 body 標籤末尾的 JavaScript 程式碼。

JavaScript

首先使用引數 click 事件，再來引數是 callback 函式。click 事件告訴瀏覽器只有在使用者單擊（滑鼠左鍵）下拉選單中的任何選項時才執行 callback 函式。

html 程式碼：

   <select id="list">
        <option class="drop-down "selected="selected">1</option>
        <option class="drop-down">2</option>
        <option class="drop-down">3</option>
      </select>
      
      <script src="day19.js">
    </script>

js 程式碼：

function myFunction() {
    let elem = document.querySelectorAll(".drop-down");

    elem.forEach(element=>{
        element.addEventListener("click", e =>{
            console.log(e.target.innerHTML);
        });
    })
}

myFunction();

網頁呈現：