我有一个文本字段,接受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位数时,状态值会消失。
答案 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;
}
还可以对错误执行任何其他操作。