How to display content on select item?

I have a very simple php file where just have a html dropdown list. (see image part-1)

I need to display contents (see image part-2) on same page (mabe without page reload) when select any item from select box.
(content of part2 will change based on selection)



Part-2 portion of the image will come from a .txt file.
I can show that text file like this way:

<?php include('one.txt'); ?>
or
<?php include('two.txt'); ?>

I don't know how to load/display another files content based on selection.

Please help me.

 

at least two options:

1) php - ochange="action script which change a $_SESSION variable storing the selected index"
2) load all descriptions and show/hide them in javascript (easier with jQuery)

 

<select id="category" onchange="change_index()">

<option value='0'>-choose a category-</option>
<option value='1'>ONE</option>
<option value='2'>two</option>
<option value='3'>three</option>​

</select>

<div id="description0" style="display:none;">please select a category!</div>
<div id="description1" style="display:none;">description category 1!</div>
<div id="description2" style="display:none;">description category 2!</div>
<div id="description3" style="display:none;">description category 3!</div>



function change_index(){

var idx=document.getElementById('category').selectedIndex;
var descriptions = document.getElementsByTagName("div");
for(var i = 0; i < descriptions.length; i++) {
​

if(descriptions.name.indexOf('description')==0) {
​

if(i==idx){
​

document.getElementById('descriptions').style.display="block";​

}else{
​

document.getElementById('descriptions').style.display="none";​

}​

}​

}​

}

and if you have other divs on your page you have to work a little bit harder