Jquery是一種常用的JavaScript框架,在網頁開發中具有很高的實用性。下拉框是網頁中常見的元素之一,常用于選擇列表或篩選條件。下面介紹一種常用的Jquery實現下拉框點擊選中的方法。
$(document).ready(function(){ $(".select-box").click(function(){ $(this).find(".option-list").toggleClass("option-list-open"); }); $(".option-list li").click(function(){ var selectValue = $(this).text(); $(this).closest(".select-box").find(".select-value").text(selectValue); }); });
首先,在文檔加載完成后,使用Jquery的ready函數定義一個函數,其中監聽了類名為“select-box”的元素的點擊事件。每次點擊時,將其內部類名為“option-list”的元素添加或刪除類名“option-list-open”,以此來展開或收起下拉菜單。
然后,在類名為“option-list”的元素下,監聽每個選項的點擊事件。將點擊的選項的文本值存儲到變量selectValue中。使用closest函數選擇到最近的類名為“select-box”的元素,并將selectValue的值更新到該元素內部類名為“select-value”的元素中,完成下拉框的選中操作。
通過使用上述代碼,可以在網頁開發中快速實現下拉框點擊選中的功能。
下一篇vue模板語法解析