javascript - 用户在输入字段中输入价格 .. 选择带有自动范围的框

Question

好的。还在忙着弄清楚我们的表格等等。所以场景。我们有一个供成员(member)输入价格的表格。通常，他们会输入 50,000 到 10,000,000 之间的任何值。我们还有带有值范围的选择下拉菜单。

到目前为止的表单示例:

<div class="field">
  <label for="propertyprice">Price</label>
  <input id="currency" name="limitedtextfield" size="50" type="text" class="medium" onKeyPress="return numbersonly(event, false)" onKeyDown="limitText(this.form.limitedtextfield,this.form,8);" 
onKeyUp="limitText(this.form.limitedtextfield,this.form,8);" maxlength="8"/>
  <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="0balance">0    -    $100,000</option>
    <option value="100kmin">$100,000    -    $200,000</option>
    <option value="200kmin">$200,000    -    $300,000</option>
    <option value="300kmin">$300,000    -    $400,000</option>
    <option value="400kmin">$400,000    -    $500,000</option>
    <option value="500kmin">$500,000    -    $600,000</option>
    <option value="600kmin">$600,000    -    $700,000</option>
    <option value="700kmin">$700,000    -    $800,000</option>
    <option value="800kmin">$800,000    -    $900,000</option>
    <option value="900kmin">$900,000    -    $1,000,000</option>
    <option value="1milmin">$1,000,000    -    $2,000,000</option>
    <option value="2milmin">$2,000,000    -    $3,000,000</option>
    <option value="3milmin">$3,000,000    -    $4,000,000</option>
    <option value="4milmin">$4,000,000    -    $5,000,000</option>
    <option value="5milmin">$5,000,000    -    $10,000,000</option>
    <option value="10milplus">$10,000,000    -    +</option>
    </optgroup>
  </select>
</div>

我想做的是，选择价格范围会自动选择用户输入的范围。不需要禁用选择范围，因为我们并不总是需要成员(member)在输入中输入价格字段，但我们希望他们随后选择一个范围。所以有点反之亦然。

有人做过这样的事吗？

Answer 1

这适用于您当前的值最多为 9 的代码:

function findRange(e) {
   !e ? e = window.event : null;
   if(e.keyCode >=48 && e.keyCode <=57) {
     $('propertypricerange').selectedIndex = e.keyCode - 48;
   }
 }

 $('propertypricerange').onkeyup = findRange;

对于 100 万及以上的值，用户将不得不输入多个键，而且 Javascript 将不得不记住多个键，因此您可能需要一个输入框。如果你不想要输入框，上面代码的一个变体将记住多个值并选择该索引(例如，键入“1”、“2”，你会看到索引 12，退格键，你'会看到索引 1)

 var val = [];
 function findRange(e) {
   !e ? e = window.event : null;
   if(e.keyCode==8) {
     val.pop();
     $('propertypricerange').selectedIndex = val.join("");
   }

   if(e.keyCode >=48 && e.keyCode <=57) {
     val.push(e.keyCode - 48);
     $('propertypricerange').selectedIndex = val.join("");
   }
 }

 $('propertypricerange').onkeyup = findRange;