从多个下拉选择列表中的最小值,如math.min
问题描述:
我想弄清楚如何实现这...我有三个下拉选择列表,每个列表都有自己的值分配。我希望将三个选定值中的最小值/最小值转换为隐藏/禁用的文本字段(并且还可以显示在列表下)。从多个下拉选择列表中的最小值,如math.min
这里就是我想要一起工作: -
<select name="Question1" id="Question1" onchange="code(1)">
<option value="10.00" >This is answer A1</option>
<option value="20.00" >This is answer A2</option>
<option value="30.00" >This is answer A3</option>
</select>
<select name="Question2" id="Question2" onchange="code(2)">
<option value="10.00" >This is answer B1</option>
<option value="20.00" >This is answer B2</option>
<option value="30.00" >This is answer B3</option>
</select>
<select name="Question3" id="Question3" onchange="code(3)">
<option value="10.00" >This is answer C1</option>
<option value="20.00" >This is answer C2</option>
<option value="30.00" >This is answer C3</option>
</select>
<input type="text" id="LowestValue" name="LowestValue" onfocus="this.blur()" />
<p>The lowest value is <span>//here should be the lowest of three values</span></p>
所以用户选择30.00,30.00和10.00的结果应该是10.00如果是有道理的?
<script>
function code() { // forget the parameter
var Value1 = document.getElementById('Question1');
var Value2 = document.getElementById('Question2');
var Value3 = document.getElementById('Question3');
var LowestValue = document.getElementById('LowestValue');
//I realise this below is wrong but this is essentially what I'm hoping to acheive...
//var total = Math.min(Value1, Value2, Value3);
LowestValue.value = total;
}
</script>
的值是十进制(双),因为数值来表示货币价值(£10.00)
感谢您的时间:)
答
这里更新的示例代码:http://jsfiddle.net/2qae6r52/5/
-
在小提琴
-
LowestValueOutput
ID添加到span
- 使用
-
unwrapped the function declaration of
code
select
的.value
元件 - 使用3个参数来
Math.min
- 附加
disabled
属性的最后输入 - 使用
.textContent
为span
content - use
.toFixed(2)
for make a string wi第2位小数(由Math.floor
选中)
这里的HTML代码:
<select name="Question1" id="Question1" onchange="code(1)">
<option value="10.00" >This is answer A1</option>
<option value="20.00" >This is answer A2</option>
<option value="30.00" >This is answer A3</option>
</select>
<select name="Question2" id="Question2" onchange="code(2)">
<option value="10.00" >This is answer A1</option>
<option value="20.00" >This is answer A2</option>
<option value="30.00" >This is answer A3</option>
</select>
<select name="Question3" id="Question3" onchange="code(3)">
<option value="10.00" >This is answer A1</option>
<option value="20.00" >This is answer A2</option>
<option value="30.00" >This is answer A3</option>
</select>
<input type="text" disabled="disabled" id="LowestValue" name="LowestValue" onfocus="this.blur()" />
<p>The lowest value is <span id="LowestValueOutput"><!--here should be the lowest of three values--></span></p>
这里的JS代码:
function code() { // forget the parameter
var Value1 = document.getElementById('Question1');
var Value2 = document.getElementById('Question2');
var Value3 = document.getElementById('Question3');
var LowestValue = document.getElementById('LowestValue');
var LowestValueOutput = document.getElementById('LowestValueOutput');
var total = Math.min(Value1.value, Value2.value, Value3.value);
if (total != Math.floor(total)) {
total = total.toFixed(2);
}
LowestValue.value = LowestValueOutput.textContent = total;
}
答
window.onload=function() {
var sel1 = document.getElementById('Question1'),
sel2 = document.getElementById('Question2'),
sel3 = document.getElementById('Question3'),
lowest =document.getElementById('LowestValue');
sel1.onchange=
sel2.onchange=
sel3.onchange=function() {
lowest.value=Math.min(
parseFloat(sel1.value),
parseFloat(sel2.value),
parseFloat(sel3.value)).toFixed(2);
}
}
为什么你认为这是错的?它应该工作。 – Bergi 2014-09-24 19:38:30
它只是没有把值放入文本输入框...... – will9455 2014-09-24 19:39:20
哦,我现在看到,你的DOM访问存在一些问题(由@NicolasAlbert完美回答,你应该[接受它](http:// stackoverflow .COM /帮助/人,答案))。但是,将三个数字值传递给'Math.min'就像你想要做的那样。 – Bergi 2014-09-24 19:52:44