jQuery applying script to multiple select boxes

Question

I followed this tutorial here that turns a select box into a slider on gravity forms using the jquery UI and it works, however...

https://jsfiddle.net/hirejordansmith/6rapbyn2/

I have 100s of select boxes and I need them all working correctly as the tutorial is only for one select box on the page.

If you have multiple is seems to add all of the select box fields into all of the sliders, any ideas guys?

This is the link I'm working on: https://www.claims.co.uk/test123#gf_1

To get to the slider section select male>head>"Damage to teeth"+"Deafness"+"Epilepsy" and then press next to see the sliders.

This is my code:

 jQuery(document).ready(function($) {

    function sliderTooltip( $select, index, $handle ) {

    var index    = Math.max( 0, index ),
        curValue = $selectDesktop.find('option').eq(index).text(),
        tooltip  = '<div class="tooltip"><div class="tooltip-inner">' + curValue + '</div><div class="tooltip-arrow"></div></div>';

    $handle.html(tooltip);

  }

  function sliderConditionalLogic( $select, index ) {
    var index  = Math.max( 0, index ),
        formId = $select.parents( 'form' ).attr( 'id' ).split( '_' )[1],
        $input = $( '#gform_next_button_' + formId + '_2' );
    if( index == 0 ) {
        $input.hide();
    } else {
        $input.show();
    }
  }

    var $selectDesktop = $(".claims-calculator .gfield_select");
    var $sliderDesktop = $("<div id='slider-desktop'></div>")
      .insertAfter($selectDesktop).slider({
        min: 1,
        max: $selectDesktop.find('option').length,
        range: "min",
        value: $selectDesktop[0].selectedIndex + 1,
        slide: function(event, ui) {
          $selectDesktop[0].selectedIndex = ui.value - 1;
          sliderTooltip( $selectDesktop, ui.value - 1, $( ui.handle ) );
          sliderConditionalLogic( $selectDesktop, ui.value - 1 );
        }
      });

    sliderTooltip( $selectDesktop, $selectDesktop[0].selectedIndex, $sliderDesktop.find('.ui-slider-handle' ) );
    sliderConditionalLogic( $selectDesktop, $selectDesktop[0].selectedIndex );

});

Answer 1

To get your code to work for only one select box at a time like you want you will actually have to run a portion of it separately for each select box you have. Right now you are selecting all of your <select>'s here:

var $selectDesktop = $(".claims-calculator .gfield_select");

Perhaps the simplest way to understand and do this would be to duplicate everything after that line so that you have 3 blocks of code (one for each unique <select>) but of course this is messy so instead I recommend using the jQuery .each extension and looping through each of your elements to run the code.

Here is the code I am proposing:

$(".claims-calculator .gfield_select").each(function() {
  var $selectDesktop = $(this);
  var $sliderDesktop = $("<div id='slider-desktop'></div>").insertAfter($selectDesktop).slider({
    min: 1,
    max: $selectDesktop.find('option').length,
    range: "min",
    value: $selectDesktop[0].selectedIndex + 1,
    slide: function(event, ui) {
      $selectDesktop[0].selectedIndex = ui.value - 1;
      sliderTooltip($selectDesktop, ui.value - 1, $(ui.handle));
      sliderConditionalLogic($selectDesktop, ui.value - 1);
    }
  });

  sliderTooltip($selectDesktop, $selectDesktop[0].selectedIndex, $sliderDesktop.find('.ui-slider-handle'));
  sliderConditionalLogic($selectDesktop, $selectDesktop[0].selectedIndex);
});

Now this leaves us with 1 problem left to resolve: in your "sliderTooltip" function you have a reference to "$selectDesktop" which in my .each loop I made an instanced variable (it references a different <select> every time it runs). You need it to instead reference the <select> that is relevant at the time of execution. I recommend changing to the proper variable that your code is already piping through called: "$select" like so:

curValue = $select.find('option').eq(index).text(),