Question

我有一个选择字段，可以选择多个选项。这些选项的值是图片网址（例如，＆＃39; img / image.png＆＃39;）。当用户点击某个选项时，我希望图像（如果选择了多个图像）显示在选择字段下方。我对jQuery的输出感到困惑。到目前为止，我有：

$(document).ready(function(){

    $('.logo-select').on('change', function(){

        var options = $('.logo-select').val();

        $(options).each(function(){
            console.log(this);
        });

    });
});

我认为这会输出每个选项的值，但我在控制台中得到以下内容：

String {0: "i", 1: "m", 2: "g", 3: "/", 4: "i", 5: "m", 6: "a", 7: "g", 8: "e", 9: ".", 10: "p", 11: "n", 12: "g", length: 20, [[PrimitiveValue]]: "img/image.png"}

为什么要将价值分解为单个字母？如何使其仅输出图像路径？

Answer 1

应用程序上下文中的

this引用$(options) - Object。

尝试使用bind函数将this从外部函数的上下文绑定到内部回调函数：

$(document).ready(function(){

    $('.logo-select').on('change', function(){
        var options = $('.logo-select').val();

        $(options).each(function(){
            console.log(this);
        }.bind(this));

    });
});

有时使用this可能有点棘手，this始终引用从中调用的上下文。这意味着，在each内，this代表$(options)及其外，代表$('.logo-select')。

Answer 2

使用this绑定您的选择

$(document).ready(function(){

    $('.logo-select').on('change', function(){
        var options = [];
        options.push($(this).val());

        $(options).each(function(){
            console.log(this);
        });

    });
});

Answer 3

检查jsfiddle，这可能会对您有所帮助https://jsfiddle.net/bov3mLqr/

$('.logo-select').on('change', function(){

    var options = $('.logo-select').val();
    var splitOptions = options.split(',');
    console.log(splitOptions);
    for(var i=0; i<splitOptions.length; i++){
        console.log(splitOptions[i]);
    };

});

Answer 4

您可以在$(this).find('option:selected')中使用.on("change", ...)，您可以在每个循环中填充结果数组，如下所示。

＆＃13;

$(document).ready(function(){
    $('.logo-select').on('change', function(){            
        
        var options = $(this).find('option:selected');       
        var arr = [];
        
        console.clear();
        $(options).each(function(){
           arr.push($(this).val());
        });
        
        console.log(arr);

    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select class="logo-select" multiple>
  <option value="img/img1.png">option1</option>
  <option value="img/img2.png">option2</option>
  <option value="img/img3.png">option3</option>
  <option value="img/img4.png">option4</option>
</select>

＆＃13;

循环遍历多个选择字段选项值

4 个答案: