2014-09-24 55 views
1

我想弄清楚如何實現這...我有三個下拉選擇列表,每個列表都有自己的值分配。我希望將三個選定值中的最小值/最小值轉換爲隱藏/禁用的文本字段(並且還可以顯示在列表下)。從多個下拉選擇列表中的最小值,如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)

JSFiddle

感謝您的時間:)

+0

爲什麼你認爲這是錯的?它應該工作。 – Bergi 2014-09-24 19:38:30

+0

它只是沒有把值放入文本輸入框...... – will9455 2014-09-24 19:39:20

+0

哦,我現在看到,你的DOM訪問存在一些問題(由@NicolasAlbert完美回答,你應該[接受它](http:// stackoverflow .COM /幫助/人,答案))。但是,將三個數字值傳遞給'Math.min'就像你想要做的那樣。 – Bergi 2014-09-24 19:52:44

回答

3

這裏更新的示例代碼:http://jsfiddle.net/2qae6r52/5/

    在小提琴
  • LowestValueOutput ID添加到span
  • 使用
  • unwrapped the function declaration of codeselect.value元件
  • 使用3個參數來Math.min
  • 附加disabled屬性的最後輸入
  • 使用.textContentspan 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; 
} 
+0

我該如何輸出它,以便它使用雙精度小數? – will9455 2014-09-24 20:13:29

+0

我加了.toFixed(2)。如果它對你有好處,請將答案標記爲有效。 – 2014-09-24 20:30:33

+1

非常感謝你,選擇這個作爲我接受的答案,因爲你已經詳細描述了它。 – will9455 2014-09-24 20:42:23

1
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); 
    } 
} 
相關問題