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

【问题标题】：Create Jquery Sliders on Selecting items from a MultiSelect在从 MultiSelect 中选择项目时创建 Jquery 滑块
【发布时间】：2014-04-19 09:19:35
【问题描述】：

我有一个动态填充的选择标签，如下所示：

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

我有一个更改事件侦听器，如下所示：

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

'go' 是一个与为从多选中选择的项目动态创建元素相关的函数

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

?>
 });

但这里的运气也不好。它们都不适合我。谁能分享一些见解？

【问题讨论】：

您的.change() 函数正在将<script></script><div id="sliderOPTIONTEXT">OPTIONTEXT</div> 添加到输出中。你期待它做什么？这里到底出了什么问题？
对于每个被选中的项目，我想通过脚本创建一个 jquery 滑块，我尝试在 div 之前添加脚本元素，但没有添加脚本。所以添加的 div 无法转换为 jquery 滑块所以作为一种解决方法，我在页面加载时提前创建了整个脚本（注意选择器对于 div 是相同的），在脚本中只是附加了没有脚本的元素。但这也无法创建滑块

标签： javascript jquery jquery-ui jquery-ui-slider

【解决方案1】：

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

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

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

【讨论】：