Изменить ползунок в поле выбора

Question

У меня возникли проблемы с попыткой выяснить, как изменить свой калькулятор bmi с ползунка в поле выбора, а затем передать этот ввод, чтобы он был рассчитан.

Для ног у меня есть дюймы, установленные как значения, а затем, когда выбраны сантиметры, их нужно добавить к ногам на общую сумму.

<div class="form-group"> 
     <label for="height-ft">Feet</label> 
     <select name="height-ft" id="height-ft" class="form-control"> 
      <option value="12">1'</option> 
      <option value="24">2'</option> 
      <option value="36">3'</option> 
      <option value="48">4'</option> 
      <option value="60">5'</option> 
      <option value="72">6'</option> 
      <option value="84">7'</option> 
     </select> 
    </div> 

    <div class="form-group"> 
     <label for="height-in">Inches</label> 
     <select name="height-in" id="height-in" class="form-control"> 
      <option value="1">1"</option> 
      <option value="2">2"</option> 
      <option value="3">3"</option> 
      <option value="4">4"</option> 
      <option value="5">5"</option> 
      <option value="6">6"</option> 
      <option value="7">7"</option> 
      <option value="8">7"</option> 
      <option value="9">9"</option> 
      <option value="10">7"</option> 
      <option value="11">7"</option> 
     </select> 
    </div> 

JS Fiddle: Рабочий пример с JQuery UI слайдов. http://jsfiddle.net/ypyxrks8/

Любая помощь в преобразовании этого над оценкой была бы весьма полезной.

Answer 1

У вас в основном было это. Этот слайдер делает некоторые вещи для получения значений, но вы можете получить значения с помощью parseInt(). Я должен был добавить коэффициент преобразования, чтобы получить это правильно, и вам необходимо заполнить ваши дискретные значения для веса, но вот код:

[HTML]

<div class="container"> 
<div class="row"> 
    <div class="col-md-12"> <strong>Height:</strong> 

     <div class="form-group"> 
      <select name="height-ft" id="height-ft" class="form-control"> 
       <option value="12">1'</option> 
       <option value="24">2'</option> 
       <option value="36">3'</option> 
       <option value="48">4'</option> 
       <option value="60">5'</option> 
       <option value="72">6'</option> 
       <option value="84">7'</option> 
      </select> 
     </div> 
     <div class="form-group"> 
      <select name="height-in" id="height-in" class="form-control"> 
       <option value="1">1"</option> 
       <option value="2">2"</option> 
       <option value="3">3"</option> 
       <option value="4">4"</option> 
       <option value="5">5"</option> 
       <option value="6">6"</option> 
       <option value="7">7"</option> 
       <option value="8">7"</option> 
       <option value="9">9"</option> 
       <option value="10">10"</option> 
       <option value="11">11"</option> 
      </select> 
     </div> 
    </div> 
    <div class="col-md-12"> <strong>Weight:</strong> 

     <select name="weight-in" id="weight-in" class="form-control"> 
      <option value="100">100</option> 
      <option value="120">120</option> 
      <option value="140">140</option> 
      <option value="160">160</option> 
      <option value="180">180</option> 
      <option value="200">200</option> 
      <option value="220">220</option> 
      <option value="240">240</option> 
      <option value="260">260</option> 
      <option value="280">280</option> 
      <option value="300">300</option> 
     </select> 
     <br> 
    </div> 
    <div type="button" id="calculatebutton" class="btn btn-primary">Calculate</div> 
    <div id="result"></div> 
</div> 

[CSS]

/* BMI Calculator */ 

$('#calculatebutton').click(function() { 
var weight = parseInt($('#weight-in').val()), 
    heightInches = parseInt($('#height-ft').val()) + parseInt($('#height-in').val()), 
    heightsqaured = (heightInches) * (heightInches), 
    result = ((weight)/(heightsqaured) * 703); 
debugger; 
if (result < 16) { 
    var rating = ('You are severely underweight'); 
} else if (result > 16 && result < 18.5) { 
    var rating = ('You are underweight'); 
} else if (result > 18.5 && result < 25) { 
    var rating = ('You are healthy'); 
} else if (result > 25 && result < 30) { 
    var rating = ('You are overweight'); 
} else if (result > 30 && result < 35) { 
    var rating = ('You are moderately obese'); 
} else if (result > 35 && result < 40) { 
    var rating = ('You are severely obese'); 
} else if (result > 40 && result < 80) { 
    var rating = ('You are very severely obese'); 
} else if (result > 80) { 
    var rating = ('This result seems unlikely, please check that the information you have entered is correct'); 
} 
$('#result').html('Your BMI is ' + result.toFixed(1) + '. ' + rating + '.'); 

});

Рабочая версия здесь: https://jsfiddle.net/W3AVE/ypyxrks8/7/

Answer 2

Если все, что вы ищете помощь для добавляют дюймы к ногам затем добавить эту строку коды в кнопках рассчитайте мыши:

var total = parseInt($('#height-ft').val()) + parseInt($('#height-in').val()); 

Это дает вам общее количество дюймов.