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
Post a Comment