Javascript/jQuery - Make array based on variable index of <option>

Question

I would like to get the number of options in a select tag and then generate the same number of image paths from that.


$optionIndex = $("option", "select").index; // 2
imagePath = "/images/slider/slide-"
$images = "[" + imagePath + $optionIndex + ".jpg" + "]"; 

$(window).load(function() {
  var $slider = $(".slider").slider({
    images: $images // ideally this would show ["image1.jpg", "image2.jpg" etc…]
  });
}

You're creating a string, not an array. Use a for loop or $.map(). — Matt Ball
– Matt Ball, Commented Oct 1, 2013 at 22:09
@PSL I went with your solution, however I'm curious how Satpal's solution stacks up in performance. Side note, some of my other related scripts seem to have stopped working now. So I'm at a crossroads currently. — Stephen Way
– Stephen Way, Commented Oct 2, 2013 at 4:22

Satpal · Accepted Answer · 2013-10-01 22:12:25Z

1

You have to loop through and create an array like

$images = [];
for (var i=1;i<= $optionIndex ;i++)
{ 
   $images.push(imagePath + i + ".jpg");
}

Demo

edited Oct 1, 2013 at 22:12

answered Oct 1, 2013 at 22:07

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

Comments

PSL · Accepted Answer · 2013-10-01 22:22:33Z

1

One thing is $("option", "select").index should be $("option", "select").index(). Otherwise you will end up getting the function reference of index method. But i guess you wanted to take the length and then iterate.

But here you can just do:

 var $imagePathArray = $("select").find("option").map(function(i){ //<-- zero based index
        return  imagePath + i + ".jpg" ;
 }).get();

Demo

edited Oct 1, 2013 at 22:22

answered Oct 1, 2013 at 22:15

PSL

124k21 gold badges257 silver badges243 bronze badges

Comments

StackSlave · Accepted Answer · 2013-10-01 22:36:52Z

0

Try something like:

var selOps = $('#selectId>option'), imagePath = '/images/slider/slide-', imgs = [];
selOps.each(function(i){
  imgs[i] = imagePath+this.val()+'.jpg';
});
$(window).load(function(){
  var $slider = $(".slider").slider({
  // not sure there is an images property of the slider object, so I'm confused about this part
  });
});

answered Oct 1, 2013 at 22:36

StackSlave

10.6k2 gold badges20 silver badges35 bronze badges

Collectives™ on Stack Overflow

Javascript/jQuery - Make array based on variable index of <option>

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related