基于输入字段的<option>自动选择及注意事项
我有一个SELECT元素，需要根据输入到文本字段的邮政编码的前半部分自动选择适当的选项。英国的邮政编码是表格AB12 3CD，其中第一部分由代表县的1-2个字母和代表县内区域的一个数字组成。最后三个字符与这个问题无关。
对于大多数字段，它只基于第一个字母，但对于某些选项，它是一个邮政编码范围。HTML应该最好地解释它：
<select id="country_field">
<option value="">Select</option>
<option value="AB">AB (Aberdeen)</option>
<option value="AL">AL (St. Albans)</option>
<option value="B">B (Birmingham)</option>
<option value="BA">BA (Bath)</option>
...
<option value="DD1">DD 1-7 (Dundee)</option>
<option value="DD8">DD 8-11 (Dundee)</option>
...
</select>当值正好是两个字母时，下面的代码将选择正确的元素。但是我需要把它扩展到包括单字母代码(伯明翰)和邮政编码范围(邓迪)。注意:如果存在需要特殊值的解决方案，例如DD1/DD2而不是DD1/DD8，我可以更改选项值。
简言之：
- B2 -> Birmingham
- BA3 -> Bath
- DD5 -> first Dundee DD1
- DD11 -> second Dundee DD8
F 210
这是我到目前为止的抄本..。
window.onload = function()
{
// postcode INPUT field
var zipInput = document.getElementById( 'zip_field' );
// county SELECT field
var ctySelect = document.getElementById( 'county_field' );
zipInput.onchange = function()
{
var zipValue = zipInput.value;
var ctyOptions = ctySelect.options;
for ( i = 0; i < ctyOptions.length; i++ )
{
if ( zipValue.substring(0,2) == ctyOptions[i].value )
ctyOptions[i].selected = true;
}
}
}回答 4
Stack Overflow用户
发布于 2009-05-14 19:00:21
您可以使用正则表达式提取值..。
/^([a-z]{1,2})(\d*)\s/i然后，对于一个范围类似DD的代码，可能类似于这样的代码(伪代码).
if(match[1].value == "DD") { // needs special processing
range = match[2].value;
range = range < 8 ? 1 : 8; // if the number is less than 8, set it to 1, otherwise set it to 8
listValue = match[1].value + range
} else // just use the letters to select the list item
listValue = match[1].value;因此，对于DD5，这将返回DD1，对于DD11，它将返回DD8。类似于B2或BA3的内容将分别返回B和BA。
如果有多个具有不同范围的其他代码，则可以将if更改为switch。然后，只需设置具有该值的列表项作为当前选择。
Stack Overflow用户
发布于 2009-05-14 19:00:04
取代：
zipInput.onchange = function()
{
var zipValue = zipInput.value;
var ctyOptions = ctySelect.options;
for ( i = 0; i < ctyOptions.length; i++ )
{
if ( zipValue.substring(0,2) == ctyOptions[i].value )
ctyOptions[i].selected = true;
}
}通过以下方式：
zipInput.onchange = function()
{
var zipValue = zipInput.value.match(/^[a-z]+/gi);
var ctyOptions = ctySelect.options;
for ( i = 0; i < ctyOptions.length; i++ )
{
if (zipValue[0] === ctyOptions[i].value )
ctyOptions[i].selected = true;
}
}首先，我们从循环中移除变量赋值操作。为什么浪费周期重复相同的operation?
- Number 2，我们现在过滤掉除了输入开头的字母以外的所有内容。
- ，这反过来可以扩展为包含数字后缀，等等，
。
Stack Overflow用户
发布于 2009-05-14 19:02:05
您可以将zipValue的起始值与选项值进行比较。不需要正则表达式。只需使用indexOf。
zipInput.onchange = function()
{
var zipValue = zipInput.value.toUpperCase();
var ctyOptions = ctySelect.options;
for ( i = 0; i < ctyOptions.length; i++ )
{
if ( zipValue.indexOf(ctyOptions[i].value) == 0 )
ctyOptions[i].selected = true;
}
}https://stackoverflow.com/questions/865009
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号