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

时间:2015-11-14 19:22:29

标签: javascript jquery

我有一个文本字段,接受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位数时,状态值会消失。

3 个答案:

答案 0 :(得分:1)

试试这个

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

答案 1 :(得分:1)

试试这个:

$(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);
        }
    });
});

答案 2 :(得分:0)

只应从输入中取出前两位数字。此外,当用户仍在使用.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/