JSFiddle - React, Tailwind, and code Playground
by Mark Coleman
HTML
<div class="field">
<label for="propertyprice">Price</label>
<input id="currency2" name="limitedtextfield" size="50"
type="text" class="medium" />
<p class="field_help">Enter only 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>
JavaScript
$("#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);
});