根據文本框的值選擇一個選項

我們正在做一個表單，要求用戶輸入一個價格。根據文本框的值選擇一個選項

用戶在輸入字段中輸入價格，例如456789。

我想它，因此選擇框元素自動選擇40萬 - 200萬元選項

如何才能做到這一點？

<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 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>

來源

2011-02-26 422

這不完全測試然而，這樣的事情應該能夠滿足您的需求..

$("#currency2").blur(function() { 
    if (isNaN($(this).val())) { 
     $("select").val("0"); 
     return; 
    } 
    var number = Math.round($(this).val()/100000) * 100000; 
    $("select").val(number); 
});

例如在jsfiddle。

更新

如果你想處理這一點的同時在文本框中KEYUP用戶類型也能發揮作用。

$("#currency2").keyup(function(){ 
    var number = Math.round($(this).val()/100000) * 100000; 
    var f = function(){$("select").val(number);}; 
    clearTimeout(f); 
    setTimeout(f, 200); 
});

注意，使用的setTimeout提供一個小延遲的用戶類型，因此可能不會像不和諧給用戶。

帶有鍵位的示例jsfiddle。

更新來處理不同的數字範圍。 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); 
});

也改變了選項選擇更加明確，以確保正確的選擇。

來源

2011-02-26 22:09:17

我不刪除自己的答案的唯一原因是要記住很長一段時間。你的效率更高，更高雅。 –

這正是我們需要的。可以做到這一點，無需點擊場外。？或者聽衆是否會閃現所有不同的數字並且難看？偉大的工作夥伴 – 422

看到更新，添加了使用連接的選項，很高興我可以幫忙。 –

$('input#currency2').keyup(function(event) { 
    if (e.keyCode == 13) { // enter pressed 
    var currentValue = $(this).val(); 
    var rangeValue = 0; 
    $('#propertypricerange option').each(function(element) { 
     if ($(this).val() <= currentValue) { 
     rangeValue = $(this).val(); 
     } 
    }); 
    $("#propertypricerange").val(rangeValue); 
    } 
});

未經測試。

來源

2011-02-26 22:11:29

Thankyou Andras（點擊有用）關於422 – 422

根據文本框的值選擇一個選項

回答

相關問題