JSFiddle - React, Tailwind, and code Playground

by Amit Bhagat

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<select class="bedroom-min">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<select class="type">
  <option value="all">Select...</option>
  <option value="casitas">Casitas</option>
  <option value="studios">Studios</option>
  <option value="dorm">Dorm</option>
</select>

<select class="bedrooms">
  <option value="all">Select...</option>
  <option value="1">1 bedroom</option>
  <option value="2">2 bedrooms</option>
</select>

<div class="property-load-section">
  <div class="property-item" data-bedrooms="5" data-type="casitas" data-bed="1">Room #529</div>
  <div class="property-item" data-bedrooms="4" data-type="studios" data-bed="2">Room #737</div>
  <div class="property-item" data-bedrooms="3" data-type="dorm" data-bed="2">Room #123</div>
  <div class="property-item" data-bedrooms="2" data-type="studios" data-bed="2">Room #126</div>
  <div class="property-item" data-bedrooms="1" data-type="casitas" data-bed="1">Room #523</div>
</div>

JavaScript

$(document).ready(function(){
	
	// Once document is ready
	
	// Reference to dropdowns
	var ddlRooms = $('select.bedroom-min');
	var ddlType = $('select.type');
	var ddlBedRooms = $('select.bedrooms');
	
	// Hook up event handler for change event
	ddlRooms.change( doFilter );
	ddlType.change( doFilter );
	ddlBedRooms.change( doFilter );
	
	// Start with initial filtering
	doFilter();
	
	function doFilter(){
		
		// Start with hiding all property item
		$('.property-load-section > .property-item').hide();
		
		// Get the selected values
		var selectedRooms = parseInt(ddlRooms.val());
		var selectedType = ddlType.val();
		var selectedBedRooms = ddlBedRooms.val();
		
		
		// Get items matching rooms
		var matched = $('.property-load-section').find('.property-item').filter(function () {
			
			// Current property item
			var curPropertyItem = $(this)
			
			var curPropertyRooms = parseInt(curPropertyItem.attr('data-bedrooms'))
			var curPropertyType = curPropertyItem.attr('data-type');
			var curPropertyBeds = curPropertyItem.attr('data-bed');
			
			//console.log('Rooms matched: ' + roomMatched());
			//console.log('Type matched: ' + roomTypMatched());
			//console.log('Beds matched: ' + bedsMatched())
			
			return ( roomMatched() && roomTypMatched() && bedsMatched() );
			
			function roomMatched(){
				return curPropertyRooms >= selectedRooms;
			}
			
			function roomTypMatched(){
				if ( selectedType === 'all' ){
					return true;
				}
				else if( curPropertyType === selectedType ){
					return true;
				}
				else{
					return false;
				}
			}
			
			function bedsMatched(){
				
				if( selectedBedRooms === 'all' ){
					return true;
				}
				else if ( curPropertyBeds === selectedBedRooms ){
					return true;
				}
				else{
					return false;
				}
			}			
		});
		
		// Show matched property
		//console.log('Matched items: ' + matched.length);
		matched.show();
	}	
})