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

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

Я не знаю, как это можно сделать. Может быть, путем изменения 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" />

4 ответа

  1. Так как вы пометить этот вопрос с здесь вы простой пример, как достичь этого:

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

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

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

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