jQuery Image Picker - 以编程方式选择多个图像答案

【问题标题】：jQuery Image Picker - Select multiple images programmaticallyjQuery Image Picker - 以编程方式选择多个图像
【发布时间】：2016-12-12 09:37:40
【问题描述】：

我正在使用 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();

但这不起作用。

任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery

【解决方案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>

【讨论】：

我不知道我做了什么，但你是对的 - 它确实有效。好吧，至少它在这里有人找到

【解决方案2】：

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

// 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

}

【讨论】：