Jquery過濾下拉框是一個很有用的工具。有時候我們想要對下拉框的選項進行過濾,以便只顯示我們感興趣的內容。jQuery提供了一個非常簡單的方法來實現這個功能。
//HTML <select id="fruit"> <option value="0">請選擇水果</option> <option value="1">蘋果</option> <option value="2">香蕉</option> <option value="3">橙子</option> <option value="4">草莓</option> <option value="5">葡萄</option> </select> //JavaScript $('#fruit').on('change', function() { var selectedFruit = $(this).val(); $('#fruit option').each(function() { var optionValue = $(this).val(); if (optionValue != selectedFruit && optionValue != 0) { $(this).hide(); } else { $(this).show(); } }); });
上述代碼通過給下拉框添加change事件來監聽選項改變。然后獲取選中的選項,遍歷所有選項并根據選中的選項來隱藏或顯示不需要顯示的選項。
在上面的例子中,我們希望用戶只能選擇水果,所以我們添加了一個“請選擇水果”的選項。當用戶選擇水果時,其他不相關的選項將被隱藏。
總之,我們可以輕松地通過jquery來過濾下拉框,使用戶只能看到他們想要的數據。這是一個非常有用的技巧,可以用于許多不同的應用程序場景。
上一篇Ios的json精靈