jquery - choose an option based on a textbox value -
we doing form, asking user enter price.
the user enters price in input field of 456789
.
i selectbox element automatically chooses 400,000 - 500,000 option
how can done?
<div class="field"> <label for="propertyprice">price</label> <input id="currency2" name="limitedtextfield" size="50" type="text" class="medium" onkeypress="return numbersonly(event, false)" onkeydown="limittext(this.form.limitedtextfield,this.form,12);" onkeyup="limittext(this.form.limitedtextfield,this.form,12);" maxlength="12" value="$<?=number_format($r['price'],2);?>" /> <p class="field_help">enter numbers.</p></div> <div class="field"> <label for="propertypricerange">price range </label> <select id="propertypricerange" name="propertypricerange" class="medium"> <optgroup label="enter price range"> <option selected="selected" value="0">0 - $100,000</option> <option value="100000">$100,000 - $200,000</option> <option value="200000">$200,000 - $300,000</option> <option value="300000">$300,000 - $400,000</option> <option value="400000">$400,000 - $500,000</option> <option value="500000">$500,000 - $600,000</option> <option value="600000">$600,000 - $700,000</option> <option value="700000">$700,000 - $800,000</option> <option value="800000">$800,000 - $900,000</option> <option value="900000">$900,000 - $1,000,000</option> <option value="1000000">$1,000,000 - $2,000,000</option> <option value="2000000">$2,000,000 - $3,000,000</option> <option value="3000000">$3,000,000 - $4,000,000</option> <option value="4000000">$4,000,000 - $5,000,000</option> <option value="5000000">$5,000,000 - $10,000,000</option> </optgroup> </select> </div>
this not tested however, should able fit needs..
$("#currency2").blur(function() { if (isnan($(this).val())) { $("select").val("0"); return; } var number = math.round($(this).val() / 100000) * 100000; $("select").val(number); });
example on jsfiddle.
update
if want handle while user types in text box keyup work well.
$("#currency2").keyup(function(){ var number = math.round($(this).val() / 100000) * 100000; var f = function(){$("select").val(number);}; cleartimeout(f); settimeout(f, 200); });
note, used settimeout offer small delay user types might not jarring user.
example keyup on jsfiddle.
update handle different number ranges. jsfiddle
$("#currency2").keyup(function() { var price = $(this).val().replace(/\$|\,/g, ''); if (isnan(price)) { $("select").val("0"); return; } var n = [1, 10, 100, 1000, 10000, 10000, 100000, 1000000, 1000000]; var d = n[price.length - 1]; var number = math.round(price / d) * d; var f = function() { var $last = $("select option").last(); if (number > $last.attr("value")) { $last.attr("selected", true); } else { $("select option[value=" + price + "]").attr("selected", true); } }; cleartimeout(f); settimeout(f, 200); });
also changed option selection more explicit make sure correct 1 selected.
Comments
Post a Comment