javascript - How to display image from drop down using linked values with JQuery -


i want display correct image upon selecting option in drop down. able display image if option value same displaying value; however, i'm not sure how display using echo rather value. example, if option value 1 , filename image.jpeg, image source uploads/1, rather uploads/image.jpeg.

<select class = "form-control" id="changeimage" onchange="changeimage" name="changeimage">    <option disabled selected value> -- select image -- </option>          <?php            foreach($images $imagedrop){          ?>            <option value="<?php echo $imagedrop['id'] ?>">          <?php echo $imagedrop['filename'] ?> </option>          <?php             }          ?> </select>   <script>              $('#changeimage').change(function(){       $('#image')[0].src= 'uploads/'+this.value;   }); </script> 

you may want $().text()

$('#changeimage').change(function(){   var image = $(this);   var selectedindex = image.prop('selectedindex');   var optionname = $('option', this).eq(selectedindex).text();   $('#image').prop('src', 'uploads/' + optionname); }); 

or..

$('#changeimage').change(function(){   var image = $(this);   var selectedvalue = image.val();   var optionname = $('option[value=' + selectedvalue + ']').text();   $('#image').prop('src', 'uploads/' + optionname); }); 

---- edit

please edit php code below (no spaces)

<select class = "form-control" id="changeimage" onchange="changeimage" name="changeimage">    <option disabled selected value> -- select image -- </option>          <?php            foreach($images $imagedrop){          ?><option value="<?php echo $imagedrop['id'] ?>"><?php echo $imagedrop['filename'] ?></option>          <?php             }          ?> </select>   <script>              $('#changeimage').change(function(){       $('#image')[0].src= 'uploads/'+this.value;   }); </script> 

or.. use trim()

$('#changeimage').change(function(){   var image = $(this);   var selectedindex = image.prop('selectedindex');   var optionname = $('option', this).eq(selectedindex).text().trim(); // trim here!   $('#image').prop('src', 'uploads/' + optionname); }); 

or.. (and)

$('#changeimage').change(function(){   var image = $(this);   var selectedvalue = image.val();   var optionname = $('option[value=' + selectedvalue + ']').text().trim(); // trim here!   $('#image').prop('src', 'uploads/' + optionname); }); 

--- edit again.

<?php   $options = array();   foreach($images $imagedrop) {     $options[] = sprintf('<option value="%d">%s</option>', $imagedrop['id'], $imagedrop['filename']);   } ?> <select class = "form-control" id="changeimage" onchange="changeimage" name="changeimage">    <option disabled selected value> -- select image -- </option>     <?php echo implode('   \n' /* bueaty html source, use '' */, $options); ?> </select>    <script>              $('#changeimage').change(function(){     var image = $(this);     var selectedindex = image.prop('selectedindex');     var optionname = $('option', this).eq(selectedindex).text().trim(); // trim here!     $('#image').prop('src', 'uploads/' + optionname);   }); </script> 

Comments

Popular posts from this blog

ios - RestKit 0.20 — CoreData: error: Failed to call designated initializer on NSManagedObject class (again) -

java - Digest auth with Spring Security using javaconfig -

laravel - PDOException in Connector.php line 55: SQLSTATE[HY000] [1045] Access denied for user 'root'@'localhost' (using password: YES) -