Change carousel images according to images selected in select form

Question

I'm creating a Carousel with bootstrap and I'd like to create a link that jump directly to the nth slide in the carousel.

My current code consist: index.html:

<div id="myCarousel" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators"><!-- carousel-indicators Starts -->

<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>

</ol><!-- carousel-indicators Ends -->

<div class="carousel-inner"><!-- carousel-inner Starts -->

<div class="item active">
<center>
<img src="admin_area/product_images/<?php echo $pro_img1; ?>" class="img-responsive">
</center>
</div>

<div class="item">
<center>
<img src="admin_area/product_images/<?php echo $pro_img2; ?>" class="img-responsive">
</center>
</div>

<div class="item">
<center>
<img src="admin_area/product_images/<?php echo $pro_img3; ?>" class="img-responsive">
</center>
</div>

</div>

and my options form has:

<form action="actionOnSubmit" method="post" class="form-horizontal" ><!-- form-horizontal Starts -->

<select name="product_size" id="limit" onchange="actionOnSubmit(this.value)" class="form-control" >

<option value="0">Select a Size</option>
<option value="1">Small</option>
<option value="2">Medium</option>
<option value="3">Large</option>