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" />

如果您不想要输入框，可以用隐藏字段替换它们。

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

1 个答案: