Hello Reader! Usually, when we are asked to get the contents to be displayed as per the value selected from the drop down we use to get it done with the concept of id. Consider a scenario where the list contains more than 10 items, than generating unique id for each item of the list will be little typical. Thus in this blog, we will be doing the same task with the help of jquery indexing.

You are required to add the following link to your file:

Below is the sample program to demonstrate the use of jquery indexing:

HTML Code:

<div class="container"> 

	<select class="selectBox"> 
		<option value="">item1</option> 
		<option value="">item2</option> 
		<option value="">item3</option> 
		<option value="">item4</option> 
	</select> 

	<div class="contentItem"> 

		<div class="content"> 
			<h2>item1</h2> 
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
		</div> 

		<div class="content"> 
			<h2>item 2</h2> 
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
		</div> 

		<div class="content"> 
			<h2>item 3</h2> 
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
		</div> 

		<div class="content"> 
			<h2>item 4</h2> 
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
		</div> 

	</div> 
</div>

You can give some style to your code as per your suitability. Here is basic style sheet code:

.contentItem .content{ 
	display: none; 
} 

.selectBox{ 
	width:200px; 
	background:#fff; 
	margin: 0px 560px; 
} 

.content h2{ 
	text-align: center; 
	text-transform: uppercase; 
	letter-spacing: 2px; 
} 

.content p{ 
	text-align: justify; 
	font-weight: bold; 
} 

.content{ 
	width: 400px; 
	border:1px solid black; 
	background:#999; 
	color: #fff; 
	display: none; 
	margin-top: 100px; 
	margin-left: 460px; 
	padding: 20px; 
	box-shadow: 5px 5px 10px #888888; 
	line-height: 1.8; 
}

js code:

$(function(){ 

	$('.contentItem .content:eq(0)').show(); 

	$(document).on('change', '.selectBox', function() { 
		$('.contentItem .content').hide();		 
		var index = $(".selectBox option:selected").index(); 
		var selected = $('.contentItem .content:eq("'+index+'")'); 
		selected.show(); 

	}); 

});

Here in this sample code we have taken only 4 items in the drop down list as an instance to make the concept of indexing clear. We will be using the jquery index() method to get the integer value which indicates the position of the element within the jquery object which is relative to its sibling elements.

Happy Coding :)