从html输入获取值

Question

我有一个输入元素，它是一个范围滑块，我想将其转换为上下限的滑块。 尽管正在讨论中，但尚未针对范围实现此功能。 如您所见，这是一个受欢迎的问题。

我的问题是，我检索滑块结果的方式似乎不再起作用，并且我不明白为什么。 我原来的滑块是这样的：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form>
        <label for="slider">
            <input id="slider" type="range" value="0" oninput="sliderAmount.value = slider.value" min="0" max="100" step="1" />
            stuff: <output name="sliderAmount" for="slider">0</output>
        </label>
    </form>
    <div id="stuff"></div>
    <script>
        amt = document.getElementById("slider");
        var amtChange = function () {
            document.getElementById('stuff').innerHTML+='<div>'+amt.value+'</div>';
        };
        amt.onchange = amtChange;
    </script>
</body>
</html>

每次滑动该条时，它都会用新结果更新填充div。 我希望能够使用jquery滑块执行相同的操作，但改为使用范围更新东西div。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Slider - Range slider</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
        $(function () {
            $("#slider-range").slider({
                range: true,
                min: 0,
                max: 500,
                values: [75, 300],
                slide: function (event, ui) {
                    $("#amount").val(ui.values[0] + " - " + ui.values[1]);
                }
            });
            $("#amount").val($("#slider-range").slider("values", 0) +
                " - " + $("#slider-range").slider("values", 1));
        });
    </script>
</head>
<body>
    <form>
        <label for="amount">Price range:</label>
        <input id="amount" type="text" readonly style="border:0; color:#f6931f; font-weight:bold;">
        <div id="slider-range"></div>
    </form>
    <div id="stuff"></div>
    <script>
        amt = document.getElementById("amount");
        var amtChange = function () {
            document.getElementById('stuff').innerHTML += '<div>' + amt.value + '</div>';
        };
        amt.onchange = amtChange;
    </script>
</body>
</html>

但是，这似乎无法从滑块输入中拉出范围。 如果我进入Chrome的jquery示例控制台，则可以键入amt.value ，它将每次返回该值。 我在这里想念什么？

Answer 1

只需在更改其值时触发change()方法进行input 。

尝试这个：

演示： FIDDLE

 $(function () {
        $("#slider-range").slider({
            range: true,
            min: 0,
            max: 500,
            values: [75, 300],
            slide: function (event, ui) {
                $("#amount").val(ui.values[0] + " - " + ui.values[1]).change();
            }
        });
        $("#amount").val($("#slider-range").slider("values", 0) +
            " - " + $("#slider-range").slider("values", 1)).change();
    });

Answer 2

您可以使用jQuery UI Range Slider的change事件。 使用它并将更新的更改附加到如下所示的内容。

$(function () {
        var changes = '';
        $("#slider-range").slider({
            range: true,
            min: 0,
            max: 500,
            values: [75, 300],
            slide: function (event, ui) {
                $("#amount").val(ui.values[0] + " - " + ui.values[1]);
            },
            change: function (event, ui) {
                changes += '<div>' + ui.values[0] + " - " + ui.values[1] + '</div>';
                $("#stuff").html(changes);
            }
        });
        $("#amount").val($("#slider-range").slider("values", 0) +
            " - " + $("#slider-range").slider("values", 1));

    });

从html输入获取值

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-12-11 04:59:19

解决方案2
0 2015-12-11 05:14:47

从html输入获取值

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-12-11 04:59:19

解决方案2 0 2015-12-11 05:14:47

解决方案1
1 已采纳 2015-12-11 04:59:19

解决方案2
0 2015-12-11 05:14:47