[英]Is it possible to change the min and max of a HTML5 range slider according to the input of another form?
Refer to this: http://www.alainbruno.nl/form.html 请参阅: 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. 因此,例如,当选择的种族是人类时,我希望年龄滑块的最小值和最大值在10-80之间,但是当选择Faela时,我希望它在10-70之间。 Is this possible, and if so, how?
这是可能的,如果是的话,怎么样?
If possible I would like it to work without submitting the race input before the slider changes. 如果可能的话,我希望它在滑块改变之前不提交比赛输入的情况下工作。
Sure, try adding this: 当然,尝试添加这个:
$('#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');
});
(note that in your code your slider started with a min/max of 14 and 60 so I changed that to 10 and 80.) (请注意,在您的代码中,滑块的最小值/最大值为14和60,因此我将其更改为10和80.)
Of course, through the use of objects
, you can make this quick and painless, something like: 当然,通过使用
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>
I see that others have already answered your question using great answers. 我看到其他人已经用很好的答案回答了你的问题。 This is my first try at Stackoverflow and hence my first answer.
这是我第一次尝试Stackoverflow,因此我的第一个答案。 I am not so advanced with JQuery or AJAX but I used a simple Javascript.
我没有使用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>
Not the best answer but I wanted to give it a try :) 不是最好的答案,但我想尝试一下:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.