jQuery的图片选择器 - 选择多个图像编程

Question

我使用jQuery库图片选择器 https://rvera.github.io/image-picker/

让我们假设我有相同的设置这样的：

<select class="image-picker" multiple="multiple"> 
    <option data-img-src="http://placekitten.com/220/200" value="1">Cute Kitten 1</option> 
    <option data-img-src="http://placekitten.com/180/200" value="2">Cute Kitten 2</option> 
    <option data-img-src="http://placekitten.com/130/200" value="3">Cute Kitten 3</option> 
    <option data-img-src="http://placekitten.com/270/200" value="4">Cute Kitten 4</option> 
</select> 

我可以选择单个图像编程像那

$(".image-picker").val("1"); 
$(".image-picker").data('picker').sync_picker_with_select(); 

在这种情况下，第一个图像将被选中。如果我选择图像的值为1和4，该怎么办？我曾尝试过：

$(".image-picker").val(["1","4"]); 
$(".image-picker").data('picker').sync_picker_with_select(); 

但这不起作用。

任何帮助将不胜感激。

Answer 1

它的工作：

$(function() { 
 
    $(".image-picker").imagepicker(); 
 
    $(".image-picker").val(["1", "4"]); 
 
    $(".image-picker").data('picker').sync_picker_with_select(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/image-picker/0.3.0/image-picker.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/image-picker/0.3.0/image-picker.min.css" rel="stylesheet"/> 
 
<select class="image-picker" multiple="multiple"> 
 
    <option data-img-src="http://placekitten.com/220/200" value="1">Cute Kitten 1</option> 
 
    <option data-img-src="http://placekitten.com/180/200" value="2">Cute Kitten 2</option> 
 
    <option data-img-src="http://placekitten.com/130/200" value="3">Cute Kitten 3</option> 
 
    <option data-img-src="http://placekitten.com/270/200" value="4">Cute Kitten 4</option> 
 
</select>

Answer 2

您想获取选择列表中的所有图像对象。由于您使用的是自定义的data-元素，因此jQuery选择器有点笨拙：select option[data-img-src]。然后找出你有（以下imgCount）有多少图像对象，并在该数组运行的相应长度的循环：

// 1- Put all img assets into an array using jQuery toArray() 
var imgArray = $("select option[data-img-src]").toArray(); 

// 2- Get number of image assets 
var imgCount = imgArray.length; 

// 3- Loop through array, limit to number of total objects in array 
for (var i=0; i <= imgCount; i++) { 

    //4- Do whatever you want with imgArray here 

}