Ändern von innerhtml Eigenschaften zur Laufzeit

Question

Ich habe eine Dropdown-Liste mit zwei Werten und einem Textfeld. Was ich will ist- - Wenn ich Option 1 wählen, das Textfeld wie das atmost 10 Zeichen lang sein sollte, kann eingegeben werden - wenn ich Option 2, sollte es für Textbox

ich nicht keine Begrenzung auf maxlength sein bin sicher, wie es gemacht werden könnte. Kann sein, indem ich den innerhtml ändere, aber nicht weiß, wie man fortfährt! Unten ist mein .jsp Dateicode für Dropdown und Textfeld, der ab sofort Textbox von maxlength 10 anzeigt, die ich dynamisch machen muss.

<select name="filetype" id="3"> 
    <option value="null">--</option> 
    <option value="CTN" >CTN</option> 
    <option value="SLID" >SLID</option> 
</select> 

<h2>Enter the number<font color="red">*</font></h2> 
     <input type="text" name="customerID" maxlength=10 size="50" id="4"/> 
     <input type="submit" value="Submit Data" /> 

Answer 1

Da Sie diese Frage mit jquery markieren, hier sind Sie ein einfaches Beispiel, wie das erreichen:

$('input[name="customerID"]').attr('maxlength') 

Dies ist ein Getter ist. Um einen Wert festzulegen, müssen Sie den zweiten Parameter schreiben. Das ganze Beispiel sollte sein:

$(document).ready(function() { 

    $('select[name="filetype"]').on('change', function(e) { 
    var val = $(this).val(); 
    if(val === "CTN") { 
     $('input[name="customerID"]').attr('maxlength', 10); //maxlength =10 
    } else if(val === "SLID") { 
     $('input[name="customerID"]').removeAttr('maxlength'); //no maxlength 
    } 
    }); 
}); 

Answer 2

mit einigem JQuery so etwas wie dies könnte funktioniert:

$("h2 input").attr({maxlength: 30}); 

Answer 3

wie unten ein onchange Ereignis select schreiben. Holen Sie sich das selected value und auf der Grundlage der Bedingung hinzuzufügen oder maxlength Attribut zu/von textbox

$("select[name=filetype]").on('change', function() { 
 
    var val = $(this).find('option:selected').val(); 
 
    $('input[name="customerID"]').val(''); 
 
    if (val == "CTN") 
 
    $('input[name="customerID"]').attr('maxlength', 10); 
 
    else if (val == "SLID") 
 
    $('input[name="customerID"]').removeAttr('maxlength'); 
 
    else 
 
    return false; 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="filetype" id="3"> 
 
    <option value="null">--</option> 
 
    <option value="CTN">CTN</option> 
 
    <option value="SLID">SLID</option> 
 
</select> 
 

 
<h2>Enter the number<font color="red">*</font></h2> 
 
<input type="text" name="customerID" maxlength="10" size="50" id="4" /> 
 
<input type="submit" value="Submit Data" />

Answer 4

Versuchen Sie den Code unten zu entfernen.

<script> 
$(function() { 
    $('select').change(function() { 
     if ($(this).val() == "CTN") { 
      $('input:first').attr('maxlength', '10') 
     } 
     else if ($(this).val() == "SLID") { 
      $('input:first').attr('maxlength', '') 
     } 
    }); 
}); 
</script> 
<select name="filetype" id="3"> 
    <option value="null">--</option> 
    <option value="CTN">CTN</option> 
    <option value="SLID">SLID</option> 
</select> 

<h2>Enter the number<font color="red">*</font></h2> 
<input type="text" name="customerID" maxlength="10" size="50" id="4" /> 
<input type="submit" value="Submit Data" />