确定。仍在忙着搞清楚我们的形式等。所以情景。我们有一个表格供会员输入价格。通常，他们会输入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>
我想做的是，选择价格范围会自动选择用户输入的范围。无需禁用选择范围，因为我们并不总是需要会员在输入中输入价格字段，但我们希望他们选择一个范围。所以有点反过来。
有人做过这样的事吗？
答案 0 :(得分：2)
这适用于最新值为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，退格，你'请参阅索引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;
答案 1 :(得分：2)
我建议你将范围值存储在javascript var中 - 如果你的范围永远不会相交，你可以只使用一个起始值数组。然后，每次为输入框触发onchange事件 -
答案 2 :(得分：1)
容易腻......
将您的选项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');
});
});
搜索正确的选择可以使用相同的方法。
答案 3 :(得分：1)
这里完全重写。支持数字键，小键盘和多字符输入，并带有退格键。输入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;
修改
接受的解决方案实际上是从评论中引用this。
答案 4 :(得分：1)
编辑：这是一个非循环版本。只需使用算术。
示例： 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,''));
});