jquery ui在表单验证期间使用多个滑块及其值

Question

我使用jQuery UI设置5个滑块,形式如下:

$(".slider").slider({
   step: 1,
   min:0,
   max:10,
   value: 5,
   start: // start logic,
   slide: function(event, ui) { //slide logic },
   stop: function(event, ui) { //stop logic }

});

滑块是表单的一部分,其他字段如名称,电子邮件等.当提交表单并显示可能错误的表单时,滑块重置为5(默认值).是否有可能而不是重置以显示用户指定的值？

Answer 1

您可以设置隐藏的表单字段,以便在更改时保存滑块的值.

然后,当您的表单重新加载时,根据隐藏的表单字段设置滑块.

我通常用滑块做的是在它们下面直接有一个文本框,当用户设置滑块时会更新.通过一些一致的命名约定,这很容易做到.

这是一个简单的例子:

<script type="text/javascript">
$(document).ready(function() {
    $(".slider1").slider({
        step: 1,
        min: 0,
        max: 10,
        value: 5,
        slide: function(event, ui) {
            //get the id of this slider
            var id = $(this).attr("id");

            //select the input box that has the same id as the slider within it and set it's value to the current slider value. 
            $("input[id*=" + id + "]").val(ui.value);
        }
    });
});

这是HTML部分:

<div class="slider1">       
</div>
<input type="text" id="slider1-txt" />

如果您不想要输入框,则可以使用隐藏字段替换它们.