Change image based on dropdown list
Sorry I'm new to php and jquery
How to change images based on dropdown menu code below using jquery
echo "<div class='form-group'>";
echo " <label for='image'> Select Image File :</label>
<select name='image' class='form-control'>
<option value=''>Select Image </option>";
foreach(glob(dirname(__FILE__) . '/images/*.{jpg,png,gif}', GLOB_BRACE) as $image){
$image = basename($image);
echo "<option value='" . $image . "'>".$image."</option>";
}
echo "</select></div>";
<script>
$(document).ready(function() {
$("#image :selected").text(); // The text content of the selected option
$("#image").val(); // The value of the selected option
});
</script>
echo "<img src='images/$image'<br /><br />";
+3
source to share
2 answers
echo "<div class='form-group'>";
echo "<label for='image'> Select Image File :</label>
<select name='image' id='selectsrc' class='form-control'>
<option value=''>Select Image </option>";
foreach(glob(dirname(__FILE__) . '/images/*.{jpg,png,gif}', GLOB_BRACE) as $image){
$image = basename($image);
echo "<option value='" . $image . "'>".$image."</option>";
}
echo "</select></div>";
echo '<img src="images/example.jpg" id="changesrc">';
<script>
$(document).ready(function() {
$('#selectsrc').change(function(){
$("#changesrc").attr('src',$(this).val());
});
});
</script>
+2
source to share
echo "<div class='form-group'>";
echo " <label for='image'> Select Image File :</label>
<select name='image' class='form-control' id=
'image'>
<option value=''>Select Image </option>";
foreach(glob(dirname(__FILE__) . '/images/*.{jpg,png,gif}', GLOB_BRACE) as $key => $image){
$image = basename($image);
echo "<option data-img-src='".$image."' value='".$key. "'>".$image."</option>";
}
echo "</select></div>";
After that, your change could be, for example:
$('#image').change(function () {
$('img').attr("src", $( this ).find( "option:selected" ).data( "img-src" ));
});
0
source to share