2014-09-24 5 views
1

Я пытаюсь понять, как это добиться ... У меня есть три списка выпадающих списков, каждый из которых имеет свои собственные значения. Я хотел бы получить минимальное/низкое из трех выбранных значений в скрытое/отключенное текстовое поле (а также <span>, чтобы оно отображалось в списках).Минимальное значение из нескольких выпадающих списков выбора, таких как 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

+0

Это просто не помещает значения в поле ввода текста ... – will9455

+0

О, я вижу, есть некоторые проблемы с вашими доступами DOM (отличный ответ от @NicolasAlbert, вы должны [принять его] (http: // stackoverflow .com/помощь/кто-ответы)). Тем не менее, передача трех числовых значений в 'Math.min', как вы хотели, будет работать. – Bergi

ответ

3

Здесь обновленный образец кода: http://jsfiddle.net/2qae6r52/5/

  • unwrapped the function declaration of code в скрипку
  • LowestValueOutput идентификатор добавленного к использованию в span
  • .value из select элементов
  • используют 3 аргументы Math.min
  • добавить disabled атрибут для последнего ввода
  • использование .textContent для span содержание
  • использование .toFixed(2) для изготовления строки 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

+0

Я добавил .toFixed (2). Отметьте ответ, если он вам подходит. –

+1

Большое спасибо, выбирая это как мой принятый ответ, потому что вы его подробно описали. – will9455

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); 
    } 
} 
Смежные вопросы