javascript - 如何使用 jQuery 过滤数据并在静态 HTML 中显示?

标签 javascript jquery html search

我正在根据用户从下拉菜单中选择的值过滤数据并在 html 容器中显示结果。我能够获取选定的值但之后无法继续,例如如何在 html 数据中查询选定的值并相应地显示结果。下面的 JSFiddle 供快速引用。在此先感谢您提供的任何帮助/指导。

Fiddle

jQUERY

function filterData(select1, select2, select3, select4){
           select1 = $("#business option:selected").text();
           select2 = $("#geography option:selected").text();
           select3 = $("#technology option:selected").text();
           select4 = $("#strategy option:selected").text();
  alert('a - ' + select1 + '; b - ' + select2 + '; c - ' + select3 + '; d - ' + select4);

};
$("#searchBtn").on("click", function(){
  filterData();
});

最佳答案

检查下面更新的 fiddle 。您将不得不处理验证部分..即。如果用户没有选择任何值等。

Fiddle

$(".ui-list li").each(function(){
    if($(this).text().toLowerCase().search(new RegExp(select1, "i")) < 0 && $(this).text().toLowerCase().search(new RegExp(select2, "i")) < 0 && $(this).text().toLowerCase().search(new RegExp(select3, "i")) < 0 && $(this).text().toLowerCase().search(new RegExp(select4, "i")) < 0){
      $(this).fadeOut();  
    } else{
      $(this).fadeIn();   
    }
  })           
}

关于javascript - 如何使用 jQuery 过滤数据并在静态 HTML 中显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20813205/

相关文章:

html - 如何设置有序列表的第一个和第二个 child 具有相同的缩进?

html - 如何使用 CSS 在表格单元格中显示旋转文本

javascript - Angular JS 范围变量不起作用

javascript - CSS - 如何使 div 中心内的 iframe 对齐并且主 div 也居中?

jquery - 动画背景颜色淡出不起作用

javascript - 使用悬停事件发送垃圾邮件时元素可见性问题

javascript - 导航到新页面后无法读取本地存储

javascript - 将边框隐藏在透明选项卡后面

javascript - 将 "current"类添加到单击的元素并在单击另一个元素时将其删除?

javascript - 转换特定字符串日期