jquery select box (dropdown), load first value

Question

I have a dropdown select boy with a few images.

I can get the images to load when the user changes value, but I want the View All to load right when the page is viewed.. I know I can do this a few different ways but I would prefer that it just loads right away since the value is specified.

$(document).ready(function() {
   $("#image").change(function() {
     $("#imagePreview").empty();
        $("#imagePreview").append("<img src=\"" + $("#image").val()  + "\" />");
   });
 });


<select name="image" id="image" class="inputbox" size="1">
   <option value="imageall.jpg" selected> - All - </option>
   <option value="image1.jpg">image1.jpg</option>
   <option value="image2.jpg">image2.jpg</option>
   <option value="image3.jpg">image3.jpg</option>
</select>

<div id="imagePreview">
</div>

Fiddle Demo

Even if you view the Fiddle demo, you will see it won't load anything until you select image1 etc.

I want the imageall.jpg to load right when someone views fiddle.

thank you

Musa · Accepted Answer · 2014-06-13 23:31:02Z

2

The change event fires when the select element value changes of course you can fire it yourself if you wanted.

$(document).ready(function() {
   $("#image").change(function() {
     $("#imagePreview").empty();
        $("#imagePreview").append("<img src=\"" + $("#image").val()  + "\" />");
   }).change();
 });

http://jsfiddle.net/28UwU/1/

answered Jun 13, 2014 at 23:31

Musa

97.9k17 gold badges123 silver badges144 bronze badges

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

4 Comments

op1001 Over a year ago

If wanted, could I change this whole function into a object or a variable? so it would not conflict with other code... ?

Musa Over a year ago

I don't understand what you are asking

op1001 Over a year ago

could i wrap the jquery code you presented in a var Wrapper = function (); like this $(document).ready(function() { var Wrapper = function() { $("#image").change(function() { $("#imagePreview").empty(); $("#imagePreview").append("<img src=\"" + $("#image").val() + "\" />"); }).change(); }; }); or would that not work?

Musa Over a year ago

You could, but I don't see how it would conflict with other code.

Community · Accepted Answer · 2017-05-23 12:13:08Z

1

@Musa has posted an interesting answer of triggering the .change() event on load, but it might be complicated if you have other functions bound to the .change() event that you wouldn't want to trigger, should you modify or update your code.

My approach would be calling a function instead. The function takes advantage of chaining available in jQuery, as well as construct the <img /> element as an object.

$(document).ready(function() {
    var imgPrev = function(imgSrc) {
        $('#imagePreview')
        .empty()
        .append($('<img />', {
            src: imgSrc,
            alt: ''
        }));
    };

    // Update image preview when <select> is updated
    $('#image').change(function() {
        imgPrev($(this).val());
    });

    // Update image preview on load
    imgPrev($('#image').find('option[selected]').val());
});

http://jsfiddle.net/teddyrised/28UwU/5/

edited May 23, 2017 at 12:13

CommunityBot

11 silver badge

answered Jun 13, 2014 at 23:40

Terry

66.7k16 gold badges107 silver badges127 bronze badges

2 Comments

op1001 Over a year ago

could you not use the imgPrev($('#image').find('option[selected]').val()); at the begining of the code?? so the difference between you and musa is that he is not declaring a whole function as you are calling it a var img Prev which is the fuction

Terry Over a year ago

@op1001 It does not matter: JS is asynchronous.

sherebry · Accepted Answer · 2014-06-13 23:39:39Z

0

You can try handling the load for your div tag in the document.ready function.

$('#image').load('@Url.Action("GetAllImages","ImageController")');

answered Jun 13, 2014 at 23:39

sherebry

1941 silver badge3 bronze badges

Collectives™ on Stack Overflow

jquery select box (dropdown), load first value

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related