根据文本框的值选择一个选项

我们正在做一个表单，要求用户输入一个价格。根据文本框的值选择一个选项

用户在输入字段中输入价格，例如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

根据文本框的值选择一个选项

回答

相关问题