Jquery选择框(下拉框)，加载第一个值

Question

我有一个下拉选择男孩与一些图像。

我可以让图像加载时，用户改变的值，但我希望viewall加载正确时，页面被查看。我知道我可以用几种不同的方法来做到这一点，但我更喜欢它直接加载，因为值是指定的。

$(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>

小提琴演示

即使你查看了demo，你也会看到它不会加载任何东西，直到你选择image1等

我希望imageall.jpg加载正确当有人观看小提琴

谢谢

Answer 1

当select元素的值发生变化时，change事件会触发，当然你也可以自己触发。

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

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

Answer 2

@Musa发布了一个关于在加载时触发.change()事件的有趣答案，但是如果你有其他函数绑定到.change()事件，你不想触发，如果你修改或更新你的代码，它可能会很复杂。

我的方法是调用一个函数。该函数利用了jQuery中可用的链接，并将<img />元素构造为对象。

$(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/

Answer 3

您可以尝试在文档中处理div标记的加载。准备功能。

$(' #图像').load(".action("GetAllImages"、"ImageController")');