Select form filter using jquery

1 Views

I’ve created a page for the list of available jobs.
There are two features in the page a Pager and Select form filter.
I need some help how the Select form filter works.
Here is a screenshot of the page:

enter image description here

Read More

This page is powered by wordpress, each job post created via Post type. See my code below: 

<?php
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    $args = array(
        'paged' => $paged,
        'posts_per_page' => 3,
        'category_name' => 'job',
        'orderby' => 'post_date',
        'order' => 'DESC',
        'post_type' => 'post',
        'post_status' => 'publish',
        'suppress_filters' => true);

    $job = new WP_Query($args);
?>

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
    <select class="filterby">
        <option>Search Location</option>
        <option value="Perth">Perth</option>
        <option value="Melbourne">Melbourne</option>
        <option value="South-Perth">South Perth</option>
    </select>
</form>
<div class="inline-block vertical-middle s-btn"> 
    <input type="submit"   value="Search" name="search">
</div>    

<?php while ($job->have_posts()) : $job->the_post();?>
    <section id="content-area" class="job clearfix">
        <div class="container">
            Job Details here
        </div>
    </section>
<?php endwhile;?>

<div class="paging">
    <?php 
        $args = array(
            'base' => @add_query_arg('paged','%#%'),
            'format' => '?paged=%#%',
            'current' => max( 1, get_query_var('paged') ),
            'prev_text'    => __('Previous'),
            'next_text'    => __('Next'),
            'total' => $job->max_num_pages);
        echo paginate_links( $args );  
    ?>
</div>

I hope you can help to solve this.

Post Views: 1

Related posts

2 comments

  1. Here is a fiddle to filter with the event change() of the select.

    $(document).ready(function() {
  $('.filter').change(function(){
    $('.filterable').each(function(){
      if($(this).data('ref') != $('.filter').val() && $('.filter').val() != -1) {
        $(this).hide();
      } else {
        $(this).show();
      }
    });
  });
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form>
  <select class="filter">
    <option value="-1">No selection</option>
    <option value="1">City 1</option>
    <option value="2">City 2</option>
    <option value="3">City 3</option>
    <option value="4">City 4</option>
  </select>  
</form>

<div class="filterable" data-ref="1">
  <p>This is a dummy div for city 1</p>
</div>

<div class="filterable" data-ref="2">
  <p>This is a dummy div for city 2</p>
</div>

<div class="filterable" data-ref="3">
  <p>This is a dummy div for city 3</p>
</div>

<div class="filterable" data-ref="3">
  <p>This is a dummy div for city 3</p>
</div>

<div class="filterable" data-ref="2">
  <p>This is a dummy div for city 2</p>
</div>

<div class="filterable" data-ref="2">
  <p>This is a dummy div for city 2</p>
</div>

<div class="filterable" data-ref="4">
  <p>This is a dummy div for city 4</p>
</div>

<div class="filterable" data-ref="4">
  <p>This is a dummy div for city 4</p>
</div>

    Anyway this example only works for single selection, not multiple selection. The method when the selected option changes, check the data-ref attribute of every div and shows/hides the div by looking at the condition

  2. You can try the .change() jquery method as it works into the example here
    https://api.jquery.com/change/
    (watch the demo).

    • Then try something like $("a").attr("href", valueVariable);

    • attr also can be used as $("element").attr("id", valueVariable);

    • valueVariable have the id of an element in the page.

    Tip

    On normal HTML when you use something like:

    <a href="#tips">Visit the Useful Tips Section</a>

    This goes to the id element into the same page.

    Comment the results and vote please.

Comments are closed.