根据文本字段的11位数字的前两位数字选择下拉值

Select a dropdown value based on first 2 digits of 11 digits number of a text field

本文关键字：数字 两位 选择 文本 字段 11位      更新时间：2023-09-26

我有一个文本字段，它接受11位数字的增值税号码，其中前两位数字代表各州，后面是任何9位数字（例如：09123456789，其中09代表印度的一个邦，与此类似）。

                  <label class="flabel">VAT Registration Number</label>
                  <input type="text" class="form-element" name="vat" id="vat1" placeholder="Please Enter 11 Digits VAT registration number" required data-bv-notempty-message="This is required" pattern="^(0[1-9]|1[0-9]|2[0-9]|3[0-5])[0-9]{9}$" data-bv-regexp-message="Please enter a valid VAT number" >

有一个STATE下拉列表，其中包含状态名称和选项值，如下所示：

                        <select class="form-element" name="address" id="state" required data-bv-notempty-message="This is required">
                        <option value="">Please select</option>
                            <option value="35">Andaman and Nicobar Islands</option>
                            <option value="28">Andhra Pradesh</option>
                            <option value="04">Chandigarh</option>
                            <option value="22">Chhattisgarh</option>
                            <option value="26">Dadra and Nagar Haveli</option>
                            <option value="25">Daman and Diu</option>
                            <option value="07">Delhi (NCT)</option>
                            <option value="30">Goa</option>
                            <option value="24">Gujarat</option>
                            <option value="06">Haryana</option>
                            <option value="02">Himachal Pradesh</option>
                            <option value="01">Jammu and Kashmir</option>
                            <option value="29">Karnataka</option>
                            <option value="31">Lakshadweep</option>
                            <option value="23">Madhya Pradesh</option>
                            <option value="27">Maharashtra</option>
                            <option value="21">Orissa</option>
                            <option value="34">Puducherry</option>
                            <option value="03">Punjab</option>
                            <option value="08">Rajasthan</option>
                            <option value="11">Sikkim</option>
                            <option value="33">Tamil Nadu</option>
                            <option value="Telangana">Telangana</option>
                            <option value="05">Uttarakhand</option>
                            <option value="09">Uttar Pradesh</option>
                            <option value="19">West Bengal</option>
                  </select>

需要的是，如果有人在增值税注册号文本框中输入11位数字，则应根据增值税编号的前两位数字在state下拉列表中选择相应的州。

我试过这个：

<script type="text/javascript">
     $(document).ready(function (){
        $('#vat1').change(function(){
             $('#state').val($(this).val());
        });
    });
</script>

当我输入前两位数字并按TAB键时，状态会被选中，但当我输入11位数字时，状态值会熄灭。

试试这个：

$(document).ready(function(){
    $("#vat1").change(function(){
      vat_id = $("#vat1").val().substr(0,2);
        if(vat_id){
        state_id = $("#state option[value =" + vat_id + "]").val();
        $("#state").val(state_id);
        }
    });
});

试试这个

    <script type="text/javascript">
         $(document).ready(function (){
            $('#vat1').change(function(){
                 var stateId = $(this).val().substr(0,2);
                 if($('#state').find('option[value="'+ stateId +'"]').length > 0){ 
                   $('#state').val(stateId);
                 }else{
                   alert('We do not provide service in selected state');
                 }
            });
        });
    </script>

只应从输入中提取前两位数字。此外，当用户仍在使用.on('input, function(){})处理程序：输入前两位数字后，也可以立即显示所选状态

$(document).ready(function (){
    $('#vat1').on('input', function() {
        var v = $(this).val().substr(0,2);
        $('#state').val(v);
    });
});

可以检查输入号码的选择选项是否存在。如果没有这样的选项，可以进行一些错误处理，例如，这里在输入控件上设置类error，用红色边框突出显示（由CSS配置）：

$(document).ready(function () {
    $('#vat1').on('input', function () {
        // clear error state
        $('#vat1').removeClass('error');
        // clear selected value
        $('#state').val("");
        // check that input length is at least 2 symbols
        if ($(this).val().length < 2) {
            return;
        }
        // select first two symbols from input
        var v = $(this).val().substr(0, 2);
        // check that option with given code exists
        var opt = $("#state option[value =" + v + "]");
        if (opt.length == 0) {
            // there is no option for given input
            // do whatever is needed here
            // for example show red border
            $('#vat1').addClass('error');
            // or alert message
            alert("We dont serve this State as of now");
            // or anything other...
        }
        else {
            // select State by input
            $('#state').val(v);
        }
    });
});

CSS在错误时显示红色边框：

.error {
    border: 2px solid red;
}
.error:focus {
    outline: none;
}

还可以对错误执行任何其他操作。

示例：http://jsfiddle.net/kx55oojx/3/

相关文章：