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 ?

Your `.change()` function is adding `
OPTIONTEXT
` to the output. What were you expecting it to do? What is actually wrong here? — Batu.Khan, Apr 19 '14 at 09:28
for every item that is selected i want to create a jquery slider Via the script i tried adding script element just before the div, but the script didnt get added. so the divs added couldnt get transformed into jquery sliders So as a work around i created the entire script in advance at page load (taking care that the selectors would be same for div ) , in the script just appended the elements without the script. But this also couldnt create the sliders — shridatt, Apr 19 '14 at 09:38

score 1 · Accepted Answer · answered Apr 19 '14 at 09:47

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();
   });
});

Create Jquery Sliders on Selecting items from a MultiSelect

1 Answers1