我有一个选择字段，可以选择多个选项。这些选项的值是图片网址(例如"img/image.png"(。当用户单击某个选项时，我希望图像(如果选择了多个图像，则显示图像(显示在选择字段下方。我对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"}
为什么要将值分解为单个字母？如何使其仅输出图像路径？
使用this绑定您的选择
$(document).ready(function(){
$('.logo-select').on('change', function(){
var options = [];
options.push($(this).val());
$(options).each(function(){
console.log(this);
});
});
});
检查 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]);
};
});
应用程序上下文中的
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')。
您可以在.on("change", ...)中使用$(this).find('option:selected') 您可以在每个循环中填充结果数组，如下所示。
$(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);
});
});<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>