SelectBoxIt only works on first instance of class

Question

I am using SelectBoxIt to style my selects and it works fine if I used ID's for them but if I use classes, although it styles them all ok, most of the options will only affect the first element with the class.

I am trying to get it so that when the form is submitted successfully the selects are reset but only the first one does.

I have tried by just using jQuery to reset the element

$("input[name=positioning]").val($("input[name=positioning] option:first").val());

but all this does is reset the orignal select which is hiding beneath the styled version so now the value showing is not the value selected.

I've also tried...

$(".exposure, .patient, .equip, .unit, .taken, .pathology, .pathway").selectBoxIt('selectOption', 0);

Only targets the first element

$(".exposure").selectBoxIt('selectOption', 0);
$(".patient").selectBoxIt('selectOption', 0);

Again only targets the first element

$(".exposure, .patient, .equip, .unit, .taken, .pathology, .pathway").each(function(){
        selectBoxIt('selectOption', 0);
});

Doesn't work at all with error selectBoxIt is not defined

Everything works as expected when using ID's but the problem is that on one of the pages I intend to use it on there will be multiple instances of the form in a slider so I have to use classes.

tatty27 · Answer 1 · 2017-07-25T15:48:58.930

I also tried using this too...

$(".positioning").data("selectBox-selectBoxIt").selectOption(0);

This would allow me to target more than one class but each class had to be targeted separately but again it would only work on the first instance of each class.

In the end I had to append the element class using the unique ID each form had (taken from the php while loop used to create the slider) so then each select on the page had a unique class (so now it didn't matter if I used id's instead of classes now either)

<form id="<?=$form_id?>">
    <select class="positioning_<?=$form_id?>">
    //rest of select here
</form>

var form_id = 'form_id'
$(".positioning_"+form_id).data("selectBox-selectBoxIt").selectOption(0);

Not exactly the solution I was hoping for but it works

SelectBoxIt only works on first instance of class

1 Answers1