从MultiSelect中选择项目时创建Jquery滑块

时间:2014-04-19 09:19:36

标签: javascript jquery jquery-ui jquery-ui-slider

我有一个动态填充的选择标记,如下所示:

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

我有一个Change Event监听器,如下所示:

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

&#39;去&#39;是一个与从多选

中选择的项动态创建元素相关的函数

go函数中的代码如下:

   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



        }

这对我不起作用,所以我只是通过简单的PHP脚本预先在页面加载时回显所有脚本标记

<script>
$(function(){


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

?>
 });       

但这里也运气不好。它们都不适合我。任何人都可以分享一些见解吗?

1 个答案:

答案 0 :(得分:1)

您是否尝试循环遍历#fuel中的每个元素并在此循环中设置滑块,如:

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

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