Изменение свойств innerhtml во время выполнения

Question

У меня есть раскрывающийся список с двумя значениями и текстовое поле. То, что я хочу это- - Если я выбираю вариант 1, текстовое поле должно быть так atmost 10 символов могут быть введены - Если я выбираю вариант 2, не должно быть никаких ограничений на MAXLENGTH для текстового поля

Я не как это можно сделать. Может быть, изменив innerhtml, но не знаю, как действовать дальше! Ниже приведен код файла .jsp для раскрывающегося списка и текстового поля, который теперь отображает текстовое поле maxlength 10, которое мне нужно сделать динамическим.

<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

Поскольку вы отметите этот вопрос jquery здесь вы простой пример того, как добиться того, чтобы:

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

Это добытчик. Чтобы установить значение, вы должны записать второй параметр. Весь пример должен быть:

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

с некоторым JQuery что-то вроде этого может работает:

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

Answer 3

Напиши onchange события select, как показано ниже. Получить selected value и исходя из условия добавления или удаления maxlength атрибута в/из 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

Попробуйте этот код, приведенный ниже.

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