代码之家 › 专栏 › 技术社区 › Alain Bruno

是否可以根据另一个表单的输入更改HTML5范围滑块的最小值和最大值?

minimum max html jquery javascript

Alain Bruno · 技术社区 · 13 年前

请参阅: http://www.alainbruno.nl/form.html

因此,例如,当选择的种族是人类时,我希望年龄滑块的最小值和最大值在10-80之间,但当选择Faela时,我想要它在10-70之间。这可能吗?如果可能,怎么做?

如果可能的话,我希望它在滑块更改之前不提交比赛输入即可工作。

3 回复 | 直到 13 年前

j08691 13 年前

当然,请尝试添加以下内容:

$('#Race').change(function () {
    if (this.value == "faela") {
        $('#slider').prop({
            'min': 10,
            'max': 70
        });
    }
    if (this.value == "human") {
        $('#slider').prop({
            'min': 10,
            'max': 80
        });
    }
    $('#slider').val(10);
    output.html('10');
});

jsFiddle example

(请注意,在您的代码中,滑块的最小/最大值为14和60,所以我将其更改为10和80。)

faino 13 年前

当然,通过使用 objects ,你可以让它快速无痛,比如:

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <title>Character Creation</title>
        <meta charset="UTF-8" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script>
            $(function(){
                //Range
                var slider = $("#slider"), val = slider.val(), output = $("#output");
                output.html(val);
                slider.on("change", function(){
                    output.html($(this).val());
                });
                //Change range values
                var minMax = {
                    human: [10, 80],
                    faela: [10, 70],
                    domovoi: [12, 99],
                    arcon: [5, 80],
                    tsaaran: [20, 100]
                };
                $("#Race").on("change", function(){
                    var ages = minMax[$(this).val()];
                    if(ages) {
                        slider.attr({
                            min: ages[0],
                            max: ages[1]
                        });
                        output.html(slider.val());
                    }
                });
            });
        </script>
    </head>
    <body>
        <h1>Form</h1>
        <form>
            <fieldset>
                <legend>Appearance</legend>
                <p>
                    <label for="Race">Select Race:</label>
                    <select name="Race" id="Race">
                        <option value="human">Human</option>
                        <option value="faela">Faela</option>
                        <option value="domovoi">Domovoi</option>
                        <option value="arcon">Arcon</option>
                        <option value="tsaaran">Tsaaran</option>
                    </select>
                </p>
                <p>
                    <label for="Gender">Select Gender</label>
                    <select name="Gender" id="Gender">
                        <option value="male">Male</option>
                        <option value="female">Female</option>
                        <option value="other">Other</option>
                    </select>
                </p>
                <p>
                    <label for="slider">Select Age:</label> <input name="slider" type="range" min="14" max="60" id="slider" value="10" />
                    <span id="output"></span>
                </p>
            </fieldset>
        </form>
    </body>
</html>

LuiNova 13 年前

我看到其他人已经用很好的答案回答了你的问题。这是我第一次尝试Stackoverflow,因此也是我的第一个答案。我对JQuery或AJAX没有那么高级,但我使用了一个简单的Javascript。

<!DOCTYPE html>
<html lang="en">
<head>
<script>
function changeRange(x,y) {
var input = document.getElementById("slider");
input.setAttribute("min", x);
input.setAttribute("max", y);
}
</script>
</head>
<body>
<h1>Form</h1>
<form>
<fieldset>
<legend>Appearance</legend>
<p>
<label>
Select Race:
</label>
<select id="Race" onchange="changeRange('10', '80')">
<option value="human">Human</option>
<option value="faela" >Faela</option>
<option value="domovoi">Domovoi</option>
<option value="arcon">Arcon</option>
<option value="tsaaran">Tsaaran</option>
</select>
</p>
<p>
<label>Select Gender</label>
<select id="Gender">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
</p>
<p>
<label for="range">Select Age:</label> <input type="range" min="14" max="60" id="slider" value="10" name="range"> <span id="output"></span>
</p>
</fieldset>
</form>
</body>
</html>

不是最好的答案,但我想试一试:)