是否可以根据其他表单的输入来更改 HTML5 范围滑块的最小值和最大值？
Posted
技术标签:
【中文标题】是否可以根据其他表单的输入来更改 HTML5 范围滑块的最小值和最大值？【英文标题】：Is it possible to change the min and max of a HTML5 range slider according to the input of another form? 【发布时间】：2013-03-28 06:26:28 【问题描述】：参考这个：http://www.alainbruno.nl/form.html
So, for instance, when the race selected is Human I want the minimum and maximum of the age slider to be between 10-80, but when Faela is chosen I want it to be between 10-70.这可能吗？如果可以，怎么做？
如果可能的话，我希望它能够在滑块更改之前不提交比赛输入的情况下工作。
【问题讨论】：
【参考方案1】：当然，试试添加这个：
$('#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。）
【讨论】：
【参考方案2】：当然，通过使用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>
【讨论】：
也谢谢你！很遗憾我不能给出 2 个正确答案:(。【参考方案3】：我看到其他人已经用很好的答案回答了您的问题。这是我在 *** 的第一次尝试，因此是我的第一个答案。我对 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>
不是最好的答案，但我想试一试:)
【讨论】：
非常感谢您的回答，因为它显示了没有 jQuery/AJAX 装饰的简单 javascript。 仅供参考，这些元素不需要 setAttribute，可以直接使用 var.elem=val 进行设置。以上是关于是否可以根据其他表单的输入来更改 HTML5 范围滑块的最小值和最大值？的主要内容，如果未能解决你的问题，请参考以下文章