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

Question

我正在根据用户从下拉菜单中选择的值过滤数据并在 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();
});

Answer 1

检查下面更新的小提琴。您将不得不进行验证部分..即。如果用户没有选择任何值等..

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();   
    }
  })           
}

Answer 2

如果你想在任何 Div 或其他标签中编写 HTML。

那你需要用 HTML 代码写成：

      var htmldata = $("#selectboxid option:selected").text();

以下代码用于编写 HTML，如果 div 已经包含其他 html 标签，您需要先清空 html 然后使用此代码

         $("#divid").empty();
         $("#divid").html(htmldata);