Javascript 用户在输入字段中输入价格。。选择具有自动范围的框

嗯。还在忙着弄清楚我们的形式等等，所以。我们有一个表格供会员输入价格。通常，他们会输入50000到10000000之间的任何内容。我们还有选择下拉列表，带有值范围

迄今为止的表格示例：

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

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

---

有人做过类似的事情吗？

这在您当前的代码中适用于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，backspace，你会看到索引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;

---

这在当前代码中适用于最大值为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，backspace，你会看到索引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;

简单的豌豆

将选项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');
  });
});

搜索正确的选项可以使用相同的方法。

轻松获得

将选项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');
  });
});

---

搜索正确的选择可以使用相同的方法。

我建议您将范围值存储在javascript变量中-如果您的范围永远不会相交，您可以使用一个起始值数组。然后，每次为输入框触发onchange事件时-

将输入框的值解析为数字 循环遍历起始点数组，直到找到一个大于解析数字的值，并从索引中减去1。 将选择框的selectedindex更改为相应的索引。

---

我建议您将范围值存储在javascript变量中—如果您的范围永远不会相交，您可以使用一个起始值数组。然后，每次为输入框触发onchange事件时-

将输入框的值解析为数字 循环遍历起始点数组，直到找到一个大于解析数字的值，并从索引中减去1。 将选择框的selectedindex更改为相应的索引。

---

在这里完全重写。支持数字键、numpad和多字符输入，可删除退格。输入2-0退格将得到200000-2000000-200000。在IE和FF工作。不需要输入字段，只需关注下拉列表并键入

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>

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

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>

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

编辑

---

接受的解决方案实际上是指，从评论中。

此处完全重写。支持数字键、numpad和多字符输入，可删除退格。输入2-0退格将得到200000-2000000-200000。在IE和FF工作。不需要输入字段，只需关注下拉列表并键入

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>

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

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>

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

编辑

接受的解决方案实际上是指，从评论中。

编辑：这是一个非循环版本。简单地使用算术

例如：

编辑：这是一个非循环版本。简单地使用算术

例如：

---

我想是相反的。OP希望在用户在文本字段中键入一个数字时选择select中的范围。正如@patrick dw所说，我们需要选择框来选择适合输入的范围。我认为这是另一种方式。OP希望在用户在文本字段中键入数字时选择select中的范围。正如@patrick dw所说，我们需要选择框来选择适合键入的输入的范围。仍在尝试将其调整到工作代码中：为了感觉到这一点，顺便说一句，这不适用于numpad，只适用于上面的数字键。在一秒钟内完成更好的工作。好的，请参阅我的下一个答案以获得完整的解决方案。支持数字键、numpad和多字符输入，可删除退格。输入2-0退格将得到200000-2000000-200000。在IE和FF中工作。仍在尝试将其改编为工作代码：为了感觉到它，这对numpad不起作用，顺便说一句，只是上面的数字键。在一秒钟内完成更好的工作。好的，请参阅我的下一个答案以获得完整的解决方案。支持数字键、numpad和多字符输入，可删除退格。输入2-0退格将得到200000-

---

2,000,000 - 200,000. 在IE和FF工作。噢，史蒂夫，你很好，现在来试一试，伙计，谢谢。brbhoops抱歉遗漏了$'out'。删除它仅用于测试。不包括$function，您不再需要输入框。下面是与上面完全相同的工作示例，以及JQuery中的$function。关注下拉列表，键入一两个数字。史蒂夫，干杯，这不是我们想要的，但可以想出一个很好的用途。太好了，谢谢：史蒂夫，干杯，这样更好。它会干扰页面tho上的其他js，我想这可能是由于名称类似的id造成的。这看起来更干净，更容易使用，谢谢：哦，史蒂夫，你很好，现在就试试吧，伙计，谢谢。brbhoops抱歉遗漏了$'out'。删除它仅用于测试。不包括$function，您不再需要输入框。下面是与上面完全相同的工作示例，以及JQuery中的$function。关注下拉列表，键入一两个数字。史蒂夫，干杯，这不是我们想要的，但可以想出一个很好的用途。太好了，谢谢：史蒂夫，干杯，这样更好。它会干扰页面tho上的其他js，我想这可能是由于名称类似的id造成的。这看起来更干净，更容易使用，谢谢：加油，帕特里克，差不多了。我们已经内置了字符限制、文本限制。这不是为我们选择正确的金额，本质上我认为我们与货币thang的数字存在冲突。我将禁用它，并尝试找到一个解决方法。是的，没有做到这一点，如果单击“选择”下拉框，可能是另一个问题。正确的范围在列表中突出显示，但没有像JSFIDLE示例那样集中。Bugger@422-您的其他代码是否以任何其他方式操作输入，如添加逗号或其他内容？唯一有效的字符应该是数字和小数点。是的，它添加了逗号，因此将输出从123456更改为$123，456@422-想看看你是否解决了这个问题。在我发布了这个答案之后，我看到被接受的答案发布了一个几乎相同的解决方案。唯一的区别是我没有意识到更改值是可以的。我的将它们手动转换为数组。帕特里克欢呼，差不多了。我们已经内置了字符限制、文本限制。这不是为我们选择正确的金额，本质上我认为我们与货币thang的数字存在冲突。我将禁用它，并尝试找到一个解决方法。是的，没有做到这一点，如果单击“选择”下拉框，可能是另一个问题。正确的范围在列表中突出显示，但没有像JSFIDLE示例那样集中。Bugger@422-您的其他代码是否以任何其他方式操作输入，如添加逗号或其他内容？唯一有效的字符应该是数字和小数点。是的，它添加了逗号，因此将输出从123456更改为$123，456@422-想看看你是否解决了这个问题。在我发布了这个答案之后，我看到被接受的答案发布了一个几乎相同的解决方案。唯一的区别是我没有意识到更改值是可以的。Mine将它们手动转换为数组。