如何根据表单提交的输入字段设置 JQuery 滑块的值？答案

【问题标题】：How can I set the value of a JQuery slider based on a form submitted input field?如何根据表单提交的输入字段设置 JQuery 滑块的值？
【发布时间】：2012-10-25 06:44:20
【问题描述】：

开始看API for the slider，有点困惑。我有一个简单的表单，有一个输入，输入一个包含滑块的“结果”页面。当用户滑动滑块手柄时，值会发生变化（意味着最终值在函数中计算 - 输入被添加到数字）

现在，我已经硬编码了滑块的值，但我希望该值是来自原始表单输入的实际值。不知道如何完成，但这是我正在使用的功能：

$(function() {
    $("#ds1").slider({
        orientation: "horizontal",
        step: 7,
        range: "min",
        max: 200,
        value: 50,
        slide: refreshTotal,
        change: refreshTotal
    });
});

所以该值被硬编码为 50，但我想要一个输入字段来控制该值。 refreshTotal 函数处理实际计算。如果以与此相同的方式处理，也可以设置最大值。

我在这里搜索并找到了一些“实时”输入影响滑块的示例，反之亦然，使用 keyup 等。但我不知道如何设置值（可能使用 getter），基于用户点击提交后的表单输入字段，JQuery 处理计算。

我认为这是一件很简单的事情，只是似乎无法弄清楚。

【问题讨论】：

看起来我可以将值设置为 0，作为默认值，然后获取用户输入并从该输入设置 .value()。对此进行更多研究。

标签： jquery jquery-ui

【解决方案1】：

这假设 jQuery 和 jQuery UI。

$(function () {
    var $slider = $('#slider').slider();
    var $input_a = $('#input_a');

    // Set slider value
    $input_a.on('keyup', function () {
        $slider.value($(this).val());

    // Default slider
    }).trigger('keyup');

    // Set input value
    $slider.change(function () {
        $input_a.val($(this).value());
    };
});

【讨论】：

【解决方案2】：

我将假设您已从原始表单中获取输入字段的值。由于您没有提到后端语言，因此一些如何在 PHP 中执行此操作的示例代码如下所示：

<? $value = $_POST['slider_value']; ?>
var slider_value = <? echo $value; ?>;

然后，您可以使用您提到的 API Docs 中的选择器：

$( "#ds1" ).slider( "option", "value", slider_value);

你可以用类似的方式处理滑块的最大值：

$( "#ds1" ).slider( "option", "max", insert_number_here);

【讨论】：

很抱歉没有提及。这是后端的 PHP。就像您发布的那样，我将值设置为 PHP 中的变量。你能在 PHP 和 JS 的变量中回显出这个值吗？我看到你正在设置函数的值，这是有道理的。
是的，因为 PHP 是后端而 JavaScript 是客户端，您可以按照我上面显示的方式将 JavaScript 变量设置为 PHP 变量的值。尝试一个简单的例子。