Create Jquery Sliders on Selecting items from a MultiSelect

Question

I have a dynamically populated select Tag as follows :

<select id="select-mul" multiple>
<option>...</option>
<option>...</option>
<option>...</option>
</select> .

I have an Change Event listener as follows :

 $('#select-mul').change(function(){
            go($(this).val());
          });

'go' is a function which is related with creating elements dynamically for the items selected from the multi select

The code in the go function is as follows :

   function go(value){


   // here '#fuel' is a division in which the elements will be appended

        var elements=[];
       if(value != null){
        //create all the elements for the values selected in multiselect 
        for(var i=0;i<value.length;i++){

                var fuel=$("<div id='slider"+value[i]+"'></div>").text(value[i]);
                //push the elements in the array
                elements.push(fuel);

               }

               $('#fuel').html("");
        // Append all the elements which were created
        for(var i=0;i<elements.length;i++)
            {
                //apending the neccessary script to turn the appended division into a jquery slider
                $('#fuel').append($("<script>"),{
                    html : '$(function(){$( "#slider'+value[i]+'" ).slider(); );'
                }); 
                $('#fuel').append(elements[i]);
            }

        }
       else
           $('#fuel').html("<p></p>"); //No elements selected so clear the content



        }

This doesnt work for me, so i just echo'd all the script tags in advance on page load via a simple PHP script

<script>
$(function(){


<?php 
foreach ($fuel_stock as $fuel)
    echo '$( "#slider'.$fuel['Fuel_id'].'" ).slider();';

?>
 });       

But bad luck here also. Neither of them work for me. Can anyone share some insight ?

Answer 1

Have you tried looping through each element in #fuel and setting sliders inside this loop like :

$('#select-mul').change(function(){
   go($(this).val());

   $('#fuel div').each(function(){
      $(this).slider(); // or $("#", $(this).attr("id")).slider();
   });
});