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

Popular posts from this blog

c# - How to set Z index when using WPF DrawingContext? -

razor - Is this a bug in WebMatrix PageData? -

visual c++ - Using relative values in array sorting ( asm ) -