CODEWITHSUNDEEP
javascriptjqueryhtmlsearch
user2695680
user2695680

Reputation:

How to filter the data and display within static HTML using jQuery?

I am working on filtering the data and displaying the result within html container according to the value user selects from drop down menu. I am able to take the selected values but not able to proceed after, like how to query the selected value within html data and display the result accordingly. JSFiddle below for quick reference. Thanks in advance for any help/guidance.

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

Upvotes: 2

Views: 1219

Answers (2)

Nitesh
Nitesh

Reputation: 484

Check the updated fiddle below. You will have to work on validation part.. ie. if user doesn't select any value etc..

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

Upvotes: 1

Rahul Bajaj
Rahul Bajaj

Reputation: 375

If you want to write HTML in any Div or other tag.

Then you need to use to write HTML code as:

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

Below Code Used for write HTML if div already contain other html tags you need to first empty the html then use this code

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

Upvotes: 0

Related Questions