如何限制用户应该根据下拉响应给出文本字段的值 - How to restrict the user should give value for an text field depending upon dropdown response?

我有2个字段。一个是下拉选择框。第二个是文本框。下拉框中有两个值数值和。如果用户从下拉框中选择alpha值，那么文本框应该只接受alpha值。如果用户选择数字，那么文本框应该只接受数字值。

下面是我的示例代码。

<script>
    function isAlpha()
    {
        $("#Label").keypress(function (e) {
            if (e.which < 97 /* a */ || e.which > 122 /* z */) {
                e.preventDefault();
            }
        });
    }
    function isNumberKey(evt) {
        var charCode = (evt.which) ? evt.which : event.keyCode
        if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;
        return true;
    }
    function NumAlpha()
    {
        var Alpha_Numeric = document.getElementById('Attribute').value;
        if (Alpha_Numeric == 1)
        {
            isAlpha();
        }
        else
        {
            isNumberKey(evt);
        }
    }
</script>
<select  name="Attribute[]" class="required" id="Attribute" >
    <option selected  value="">Field Attribute</option>
    <option value="1">Alpha</option>
    <option value="2">Numeric</option>
</select>
<input type="text" name="Label[]" class="required" id="Label" onkeypress="return NumAlpha();"   onClick="field_length();" placeholder="Field Label" class="form-control">

在这个代码的概念是只适用于alpha ..但它不工作的数值…请给我一些建议

试一试

function change(evt){
	var dd=document.getElementById("slt1").value;
	if (dd == "a"){
	return ValidateAlpha(evt);
	}else{
	return isNumberKey(evt);
	}
}
function isNumberKey(evt){  <!--Function to accept only numeric values-->
    //var e = evt || window.event;
	var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode != 46 && charCode > 31 
	&& (charCode < 48 || charCode > 57))
        return false;
        return true;
}		   
function ValidateAlpha(evt)
{
	var keyCode = (evt.which) ? evt.which : evt.keyCode
	if ((keyCode < 65 || keyCode > 90) && (keyCode < 97 || keyCode > 123) && keyCode != 32)
	 
	return false;
		return true;
}

<input id="txt1" type="text" onkeypress='return change(event);'></input>
<select onchange="document.getElementById('txt1').value=null;" id="slt1">
<option selected="selected" value="a">Alpha</option>
<option value="b">Numberic</option>
</select>

您可以这样做:

$(document).on('change', '.dropdown', function () {
    var selected = $(this).val();
    $('.input').attr('required', false);
    $('#' + selected).attr('required', required);
})
<!-- HTML -->
<select name="" id="input" class="form-control" required="required">
    <option value="a">a</option>
    <option value="b">b</option>
</select>
<input type="text" class="input" id="a" />
<input type="text" class="input" id="b" />

注:这是未测试的代码

你可以尝试像下面的代码

<select onchange="selectAlNum(this)"  name="Attribute[]" class="required" id="Attribute" >
    <option selected  value="">Field Attribute</option>
    <option value="1">Alpha</option>
    <option value="2">Numeric</option>
</select>
<input type="text" name="Label[]" class="required" id="Label" onkeydown="return NumAlpha(event)"  placeholder="Field Label" class="form-control">

JavaScript代码

var AlNumValue = 0;
function selectAlNum(e){
    document.getElementById('Label').value = '';
    AlNumValue = e.value;
}
function NumAlpha(e){
    var value = e.which;
    if (AlNumValue==1) {
        /*Only Alpha are allowed*/
        if((value>=65 && value<=90)|| (value>=48&&value<=57)){
            return true;
        }
    }else if(AlNumValue==2){
        /*Only Numbers are allowed*/
        if((value>=96 && value<=105)|| (value>=48&&value<=57)){
            return true;
        }
    }
    if(value==8){
      return true;
    }
    return false;
}