用戶在輸入字段中輸入價格..選擇具有自動范圍的框

Question

好。 仍在忙於弄清楚我們的表格，等等。 我們有一個表格供會員輸入價格。 通常，他們會輸入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>

我想做的是選擇價格范圍自動選擇用戶輸入的范圍。不需要禁用選擇范圍，因為我們並不總是需要成員在輸入字段中輸入價格，但是我們希望他們然后選擇一個范圍。 反之亦然。

有人做過這樣的事情嗎？

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;

如果值等於或大於一百萬，則用戶將不得不輸入多個鍵，而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;

Answer 2

我建議您將范圍值存儲在javascript var中-如果您的范圍永遠不會相交，則可以只使用一組起始值。 然后，每次為輸入框觸發onchange事件時-

• 將輸入框的值解析為一個數字
• 循環遍歷起點數組，直到找到一個大於解析數字的值，然后從索引中減去1。
• 將選擇框的selectedindex更改為適當的索引。

Answer 3

十分簡單...

重命名您的選項ID，如下所示：

<input type="text" id="text-value" value="0" name="text-value" />
  <select id="select-list" name="select-list">
    <option id="min_100" value="100kmin">$100,000    -    $200,000</option>
    <option id="min_200" value="200kmin">$200,000    -    $300,000</option>
    ...
  </select>

$(function(){
  $('#select-list').change(function(){
    var _id = $(this).val().split('_');
    $('#text-value').val('$'+_id[1]+',000');
  });
});

搜索正確的選擇可以使用相同的方法。

Answer 4

全文在這里重寫。 支持數字鍵，數字鍵盤和多字符輸入，並帶有退格鍵。 輸入2-0退格鍵將為您提供200,000-2,000,000-200,000。 可在IE和FF中使用。 不需要input字段，只需關注下拉菜單並輸入即可。

HTML，為簡化JavaScript調整的值：

<optgroup label="Enter Price Range">
  <option selected="selected" value="0balance">0    -    $100,000</option>
  <option value="1">$100,000    -    $200,000</option>
  <option value="2">$200,000    -    $300,000</option>
  <option value="3">$300,000    -    $400,000</option>
  <option value="4">$400,000    -    $500,000</option>
  <option value="5">$500,000    -    $600,000</option>
  <option value="6">$600,000    -    $700,000</option>
  <option value="7">$700,000    -    $800,000</option>
  <option value="8">$800,000    -    $900,000</option>
  <option value="9">$900,000    -    $1,000,000</option>
  <option value="10">$1,000,000    -    $2,000,000</option>
  <option value="20">$2,000,000    -    $3,000,000</option>
  <option value="30">$3,000,000    -    $4,000,000</option>
  <option value="40">$4,000,000    -    $5,000,000</option>
  <option value="50">$5,000,000    -    $10,000,000</option>
  <option value="100">$10,000,000    -    +</option>
</optgroup>

Javascript：

//Keypress storage
var val = [];

//Keypress manager function
function findRange(e) {
  !e ? e = window.event : null;
  $('out').innerHTML = e.keyCode   // SORRY REMOVE THIS LINE (testing only)

  //Enable backspacing
  if(e.keyCode==8) {
    val.pop();
    findIndex();
  }

  //Enable keyboard numbers
  if(e.keyCode >=48 && e.keyCode <=57) {
    val.push(e.keyCode - 48);
    findIndex();
  }

  //Enable numpad numbers
  if(e.keyCode >=96 && e.keyCode <=105) {
    val.push(e.keyCode - 96);
    findIndex();
  }
}

//Dropdown option value finder
function findIndex() {
  var opts = $('propertypricerange').options;
  for(x=0;x<opts.length;x++) {
    if(opts[x].value == val.join("")) {
      $('propertypricerange').selectedIndex = x;
      break;
    }
  }
}

//Event
$('propertypricerange').onkeyup = findRange;

編輯

接受的解決方案實際上是從注釋中引用此 。

Answer 5

編輯：這是一個非循環版本。 簡單地使用算術。

示例： http ： //jsfiddle.net/uv8Jh/4/

var sel = $('#propertypricerange')[0];

function findRange(val) {
    return ( val < 1000000 ) ? (val - val % 100000) / 100000 :
           ( val < 10000000 ) ? Math.min((val - val % 1000000) / 1000000 + 9, 14) :
            15;    
}
$('#currency').keyup(function() {
    sel.selectedIndex = findRange(this.value.replace(/[^0-9.]/g,''));
});

---

原始答案：

這是一個解決方案，盡管它可能需要一些代碼來確保僅數字輸入到輸入中。

不依賴於鍵碼。 只需將輸入值與已存儲在數組中的值進行比較即可。

示例： http ： //jsfiddle.net/uv8Jh/1/

   // cache the select list
var sel = $('#propertypricerange')[0];
   // Make an array of the values
var values = $.map( sel.options, function(opt) {
    return (opt.value.indexOf('kmin') > -1) ?
        parseInt(opt.value) * 1000 :
        parseInt(opt.value) * 1000000;
});
  // receive the current value and return the index of the proper range
function findRange( val ) {
    var i = 0, len = values.length;
    while( i++ < len ) {
        if( val < values[ i ] ) {
            return i-1;
        }
    }
    return len - 1;
}
   // set the proper range on keyup event
$('#currency').keyup(function() {
    sel.selectedIndex = findRange( this.value );
});

同樣，應該進行一些清理，以防用戶鍵入無效字符。 簡單的正則表達式應該做到這一點。

---

編輯：這是關鍵事件，需要一點點檢查無效字符。

示例： http ： //jsfiddle.net/uv8Jh/2/

$('#currency').keyup(function() {
    sel.selectedIndex = findRange(this.value = this.value.replace(/[^0-9.]/g,''));
});