javascript - Change slider to select box -

i having issues trying figure out how change bmi calculator slide select box , passing input have calculated.

for feet have inches set values , when inches selected need added on feet total.

    <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: working example jquery ui slide. http://jsfiddle.net/ypyxrks8/

anyone converting on appreciated.

you had it. slider doing stuff values, can values parseint(). had add conversion factor correct, , you'll need fill in discrete values weight, here code:

[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 severely underweight');  } else if (result > 16 && result < 18.5) {      var rating = ('you underweight');  } else if (result > 18.5 && result < 25) {      var rating = ('you healthy');  } else if (result > 25 && result < 30) {      var rating = ('you overweight');  } else if (result > 30 && result < 35) {      var rating = ('you moderately obese');  } else if (result > 35 && result < 40) {      var rating = ('you severely obese');  } else if (result > 40 && result < 80) {      var rating = ('you severely obese');  } else if (result > 80) {      var rating = ('this result seems unlikely, please check information have entered correct');  }  $('#result').html('your bmi ' + result.tofixed(1) + '. ' + rating + '.'); 

});

working version here: https://jsfiddle.net/w3ave/ypyxrks8/7/