通過多重選擇字段選項值循環

Question

我有一個選擇字段，並且可以選擇多個選項。這些選項的值是圖像URL（例如'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"} 

爲什麼打破值分解成單個的字母？我怎樣才能讓它輸出圖像路徑？

Answer 1

this在您的應用程序的上下文中返回$(options) -Object。

嘗試從外部函數的上下文綁定this到內回調與bind -function：

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

可以在.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>

Answer 4

檢查的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]); 
    }; 

});