Question

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

我可以在用户更改值时加载图片，但我希望在查看页面时正确加载View All ..我知道我可以通过几种不同的方式执行此操作但我希望它只是加载因为指定了值，所以马上就开始了。

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

即使您查看了小提琴演示，您也会看到它在您选择image1等之前不会加载任何内容。

我希望当有人看到小提琴时，imageall.jpg会加载。

谢谢

Answer 1

当选择元素值发生变化时，会触发更改事件，如果需要，可以自行触发。

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

您可以尝试在document.ready函数中处理div标签的负载。

$（＆＃39;＃图像＆＃39）的负载。（＆＃39; @ Url.Action（＆＃34; GetAllImages＆＃34;＆＃34; ImageController＆＃34）＆＃39;） ;

jquery选择框（下拉列表），加载第一个值

3 个答案: