Question

我已经启动并运行了一个功能，它获取了一个选择框的ID，隐藏了选择并显示了一个Jquery UI滑块。这很有效，因为它会触发我的其他AJAX委托脚本在同一页面上查看的自动提交。

我想使用此脚本并将其转换为UI范围滑块，从2个选择框中绘制信息。

我试图添加线值：[1,7]，其中UI滑块被调用，这会显示第二个滑块选项卡，但我无法将其连接到不同的选择框。

当前功能/ HTML显示如下：

  jQuery(document).ready(function($) {
    $('#clarityfrom').each(function(index, el){
      //hide the element
      $(el).addClass("sliderOn");

      //add the slider to each element
      var slider = $( '<div class="sliderHolder"><div class=\'horizontalSlider\'></div></div>' ).insertAfter( el ).find(".horizontalSlider").slider({
        min: 1,
        max: el.options.length,
        range: 'true',

        //I TRIED THIS AND GOT 2 TABS
        //values: [ 1, 7],

        value: el.selectedIndex + 1,
        slide: function( event, ui ) {
          el.selectedIndex = ui.value - 1;

          if(!$.browser.opera && !$.browser.msie)
          {
            slider.find("a").text(el.options[el.selectedIndex].label);
          }
          else
          {
            slider.find("a").text(el.options[el.selectedIndex].text);
          }
        },
        stop: function() {
          $(el).change();
        }
      });
      if(!$.browser.opera && !$.browser.msie)
      {
        slider.find("a").text(el.options[el.selectedIndex].label);
      }
      else
      {
        slider.find("a").text(el.options[el.selectedIndex].text);
      }

      //Create a legend under the slider so we can see the options
      var options = [];
      for (var option in $(el).children())
      {
        if(!isNaN(parseInt(option)))
        {
          options.push(el.options[option].text);
        }
      }
      //the width of each legend/option
      var width = (slider.width() / (options.length - 1));

      //Add the legend. Half the width of the first and last options for display consistency.
      slider.after('<div class="slider-legend"><p style="width:' + (width / 2) + 'px;text-align:left;">' + options.join('</p><p style="width:' + width + 'px;">') +'</p></div>').parent().find(".slider-legend p:last-child").css("width", width / 2).css("text-align", "right");

      //if there are too many options so that the text is wider than the width, then hide the text
      var lastChild = slider.parent().find(".slider-legend p:last-child");
      if(lastChild[0].clientWidth < lastChild[0].scrollWidth)
      {
        slider.parent().find(".slider-legend p").css("text-indent", '200%');
      }

    });
  });



 <select name="clarityfrom" id="clarityfrom">
    <option>IF</option>
    <option>VVS1</option>
    <option>VVS2</option>
    <option>VS1</option>
    <option>VS2</option>
    <option>SI1</option>
    <option>SI2</option>
    </select><Br><br>

    <select name="clarityto" id="clarityto">
    <option>IF</option>
    <option>VVS1</option>
    <option>VVS2</option>
    <option>VS1</option>
    <option>VS2</option>
    <option>SI1</option>
    <option>SI2</option>
    </select>

任何帮助都会受到赞赏：

Answer 1

<强> HTML

<select name="clarityfrom" id="clarityfrom">
    <option value='1'>IF</option>
    <option value='2'>VVS1</option>
    <option value='3'>VVS2</option>
    <option value='4'>VS1</option>
    <option value='5'>VS2</option>
    <option value='6'>SI1</option>
    <option value='7'>SI2</option>
</select>
<select name="clarityto" id="clarityto">
    <option value='1'>IF</option>
    <option value='2'>VVS1</option>
    <option value='3'>VVS2</option>
    <option value='4'>VS1</option>
    <option value='5'>VS2</option>
    <option value='6'>SI1</option>
    <option value='7'>SI2</option>
</select>
<div id="slider"></div>
<div id="clarRange"></div>

<强> SCRIPT

var s1 = $('#clarityfrom');
var s2 = $('#clarityto');
var slider = $('#slider').slider({
    min: 1,
    max: 7,
    values: [s1[0].selectedIndex + 1, s2[0].selectedIndex + 1],
    slide: function (e, ui) {
        var r1 = $('#clarityfrom option').eq(ui.values[0]-1).text();
        var r2 = $('#clarityto option').eq(ui.values[1]-1).text();
        s1.val(ui.values[0]);
        s2.val(ui.values[1]);
        $('#clarRange')
            .html('Clarity range: ' + r1 + ' to ' + r2);
    }
});

jsFiddle DEMO

Jquery UI将Select转换为Range Slider

1 个答案: