自动选择选项

Question

我需要一点帮助才能根据输入数据自动选择一个值。

我有一张表格要填写邮政编码。根据邮政编码的前 2 位数字，我想选择最匹配的值。

<input id="postalcode" placeholder="postal code" pattern="[0-9]{5}" maxlength="5" />
<select id="agence">
<option value="0" selected="" disabled>Séléctionnez votre concession</option>
  <option value="TYRYT" data-dep="01" >01 - Agence A</option>
  <option value="GTJG" data-dep="01">01 - Agence B</option>
  <option value="TYF7" data-dep="01">01 - Agence C</option>
  <option value="CYVK" data-dep="66">66 - Agence D</option>
  <option value="VCHDX" data-dep="66">66 - Agence E</option>
  <option value="GVJR" data-dep="78">78 - Agence F</option>
  <option value="HJGG" data-dep="79">79 - Agence G</option>
  <option value="VJYJV" data-dep="79">79 - Agence H</option>
</select>

如果我在邮政编码输入中写01789，必须选择第一个包含“01”的值：

<option value="TYRYT" data-dep="01" >01 - Agence A</option>

如果我用邮政编码写54879，必须选择最接近的值：

 <option value="CYVK" data-dep="66">66 - Agence D</option>

Answer 1

你可以使用这样的东西（还有很多其他选项/解决方案/微优化）

• 获取输入
• 提取前 2 个字符
• 遍历所有选项以找到匹配data-dep的选项
• 使用找到的第一个

$(function() {
    $("#postalcode").on("input", function() {
        var prefix = $(this).val().substr(0,2);
        //console.log(prefix, $("#agence option[data-dep=" + prefix + "]").length);
        
        var opts = $("#agence option").filter(function() {
            return $(this).data("dep") == prefix;
        });

        // this will break if user enters something other than a number, eg "]"
        // var opts = $("#agence option[data-dep=" + prefix + "]");
       
        if (opts.length) $("#agence").val(opts[0].value)
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="postalcode" placeholder="postal code" pattern="[0-9]{5}" maxlength="5" />
<select id="agence">
  <option value="0" selected="" disabled>Séléctionnez votre concession</option>
  <option value="TYRYT" data-dep="01">01 - Agence A</option>
  <option value="GTJG" data-dep="01">01 - Agence B</option>
  <option value="TYF7" data-dep="01">01 - Agence C</option>
  <option value="CYVK" data-dep="66">66 - Agence D</option>
  <option value="VCHDX" data-dep="66">66 - Agence E</option>
  <option value="GVJR" data-dep="78">78 - Agence F</option>
  <option value="HJGG" data-dep="79">79 - Agence G</option>
  <option value="VJYJV" data-dep="79">79 - Agence H</option>
</select>