Loading content based on a Select option

Question

I have a screen that loads content dynamically. I'm using Jquery load(); method to fetch data on the same screen.

Now I have a combo box and this will control the content of the screen. For example: If I select a option on the drop-down, loads a file...

The combo-box is:

<select class="stock_combo">
  <option value="select">Select a corridor</option>
  <option value="1">A1</option>
  <option value="2">A2</option>
  <option value="3">A3</option>
</select>

A selected option, should do this:

<script>
    $(document).ready(function(){
     $(".dangerarea").load("dialogs/stock/corridor1.php");
    });
</script>


<div class="dangerarea">

[ .php filles will be loaded here. ]

</div>

How can I put this Javascript on each option to load it immediately?

Any help will be strongly appreciated.

Answer 1

You have to use change() for placing file content according to need

$(".stock_combo").on("change",function(){
    var selected = $(this).val();
     $(".dangerarea").load("dialogs/stock/corridor" + selected + ".php");
});