Choose default image to load on page load

Question

I have a dropdown of which changes the image within the defined DIV. When the page loads, no image is selected by default, only when you choose a dropdown option does it show. I would like it to choose the first option from the list on page load.

<div id="eyelash_style_img"></div>

<select id="eyelash_style_select" name="os0">
  <option value="select">-Choose a Style-</option>
  <option value="L004">L004 </option>
  <option value="L005">L005 </option>
  <option value="L010">L010 </option>
  <option value="L021">L021 </option>
  <option value="L024">L024 </option>
  <option value="L038">L038 </option>
</select>

<script type="text/javascript">

$("#eyelash_style_select").change(function() {  
 $("#eyelash_style_img").html($("<img />", { src: "<?=HTTP_HOST;?>Shopping/Images/" + $(this).val() + ".jpg" })); });

</script>

Sajad Karuthedath · Accepted Answer · 2014-01-10 13:05:55Z

1

Use selected attribute

<select id="eyelash_style_select" name="os0">
        <option value="select">-Choose a Style-</option>

     <option value="L004"  selected>L004 </option>
        <option value="L005">L005 </option>
        <option value="L010">L010 </option>
        <option value="L021">L021 </option>
        <option value="L024">L024 </option>
        <option value="L038">L038 </option>
    </select>

Javascript:

 $(document).ready(function () {
(
$("#eyelash_style_img").html($("<img />", { src: "<?=HTTP_HOST;?>Shopping/Images/" + $(this).val() + ".jpg" })); });
});

this script loads the image after pageLoad,just added the change function in document.ready to load the default image that is selected,you need both

$("#eyelash_style_select").change(function() {  
 $("#eyelash_style_img").html($("<img />", { src: "<?=HTTP_HOST;?>Shopping/Images/" + $(this).val() + ".jpg" })); });

edited Jan 10, 2014 at 13:05

answered Jan 10, 2014 at 12:45

Sajad Karuthedath

16.2k4 gold badges35 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

wharfdale Over a year ago

That selects the option in the dropdown but doesn't automatically load the image too.

Swarna Latha · Accepted Answer · 2014-01-10 12:47:27Z

0

Just set selected attribute as below.

<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>

answered Jan 10, 2014 at 12:47

Swarna Latha

1,00412 silver badges21 bronze badges

Comments

Jason Loki Smith · Accepted Answer · 2014-01-10 12:47:35Z

0

Create a page onload event and select the first option in the list once the page has loaded.

$(document).ready(function () {
(
    $("#eyelash_style_select").prop('selectedIndex', 0);
});

answered Jan 10, 2014 at 12:47

Jason Loki Smith

4383 silver badges12 bronze badges

Collectives™ on Stack Overflow

Choose default image to load on page load

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related