2

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

我想使用这个脚本并将其转换为来自 2 个选择框的 UI Range Slider 绘图信息。

我尝试添加行值：[ 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>

任何帮助将不胜感激：

4

1 回答 1

2

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>

脚本

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 演示

于 2013-08-13T02:55:17.777 回答