Question

我们正在做一个表格，要求用户输入价格。

用户在输入字段456789中输入价格。

我希望它能让selectbox元素自动选择400,000 - 500,000选项

如何做到这一点？

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

Answer 1

这还没有完全测试，但是这样的东西应该能够满足你的需求..

$("#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);
});

还将选项选项更改为更明确，以确保选择了正确的选项。

Answer 2

$('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 );
  }
});

未测试。

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

2 个答案: