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

时间:2013-12-28 09:56:36

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

2 个答案:

答案 0 :(得分: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();   
    }
  })           
}

答案 1 :(得分:0)

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

然后你需要用来编写HTML代码:

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

下面代码用于写HTML如果div已经包含其他html标签你需要先清空html然后使用这段代码

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