jQuery Image Picker - Select multiple images programmatically

Question

I'm using the jQuery library Image Picker https://rvera.github.io/image-picker/

Let's pretend I have the same setup like that:

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

I can select a single image programmatically like that

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

In this case the first image would be selected. What if I ant to select the image with value 1 and 4? I have tried that:

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

but this doesn't work.

Any help would be much appreciated.

paulgv · Accepted Answer · 2016-12-12 01:37:40Z

3

It does work :

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

answered Dec 12, 2016 at 1:37

paulgv

1,82817 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Thomas Dittmar Over a year ago

I don't know what I did but you are right - it does work. Well at least it's here for someone to find

serraosays · Accepted Answer · 2016-12-12 01:37:29Z

0

You want to get all image objects in the select list. Since you're using a custom data- element, the jQuery selector is a bit wonky: select option[data-img-src]. Then figure out how many image objects you have (imgCount below) and run a for loop of corresponding length over that array:

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

}

answered Dec 12, 2016 at 1:37

serraosays

8,0893 gold badges38 silver badges69 bronze badges

Collectives™ on Stack Overflow

jQuery Image Picker - Select multiple images programmatically

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related