Задайте минимальное и максимальное значение для текстового поля в зависимости от параметра, выбранного в предыдущем раскрывающемся списке.

Question

У меня есть выпадающий список и текстовое поле рядом с ним.Когда в раскрывающемся списке выбрано какое-то значение, текстовое поле должно содержать минимальные и максимальные символы в зависимости от выбранной опции.Предположим, я выбрал опцию 1, тогда текстовое поле рядом с ним должно содержать не менее 10 и не более 16 символов.

Как этого добиться?

<div class="row">
  <div class="col-sm-6">
    <div class="form-group">
      <label class="required">Select Type</label>
      <select class="form-control" id="prooftype">
        <option value="0" disabled> </option>
        <option value="name1">name1</option>
        <option value="name2">name2</option>
        <option value="name3">name3</option>
        <option value="name4">name4</option>
      </select>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="form-group md-form">
      <label class="required" for="id" data-error="wrong" data-success="right">
        <i class="fa fa-info pr-2"></i> 
        Enter Identity Card Number
      </label>
      <input id="id" type="number" minlength="3" class="form-control validate" autocomplete="off" onkeypress="return blockSpecialChar(event)" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="20" />
    </div>
  </div>
</div>

Answer 1

Если вы передадите значение опции 12/16 бэкэнду, очевидно, что данные будут отражены.Я думаю, вам нужно что-то вроде этого:

<div class="row">
  <div class="col-sm-6">
    <div class="form-group">
      <label class="required">Select Type</label>
      <select class="form-control" id="prooftype">
        <option value="0/0" disabled> </option>
        <option value="name1">name1</option>
        <option value="name2">name2</option>
        <option value="name3">name3</option>
        <option value="name4">name4</option>
      </select>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="form-group md-form">
      <label class="required" for="id" data-error="wrong" data-success="right">
        <i class="fa fa-info pr-2"></i> 
        Enter Identity Card Number
      </label>
      <input id="inputid" type="text" minlength="3" class="form-control validate" autocomplete="off" onkeypress="return blockSpecialChar(event)"  maxlength="20" />
    </div>
  </div>
</div>

И ваш JQuery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script type="text/javascript">
var selectedopt;

$('#prooftype').change(function(){
   selectedopt=  $(this).val();

   //Add your condition here, and  check the selected option value:
  if(selectedopt== "name1")
  {
   //Set input min and max value based on the selected option value.
   $('#inputid').attr('minlength','10').attr('maxlength','16');
  }
  elseif(selectedopt== "name2")
  {
   $('#inputid').attr('minlength','20').attr('maxlength','25');
  }
  // And so on........
})


</script>

Answer 2

Вы должны немного изменить свой код

<div class="row">
  <div class="col-sm-6">
    <div class="form-group">
      <label class="required">Select Type</label>
      <select class="form-control" id="prooftype">
        <option value="0/0" disabled> </option>
        <option value="10/16">name1</option>
        <option value="20/32">name2</option>
        <option value="30/48">name3</option>
        <option value="40/64">name4</option>
      </select>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="form-group md-form">
      <label class="required" for="id" data-error="wrong" data-success="right">
        <i class="fa fa-info pr-2"></i> 
        Enter Identity Card Number
      </label>
      <input id="id" type="text" minlength="3" class="form-control validate" autocomplete="off" onkeypress="return blockSpecialChar(event)"  maxlength="20" />
    </div>
  </div>
</div>

и jQuery

$('#prooftype').change(function(){

var tmp = $(this).val().split('/');
    $('input#id').attr('minlength',tmp[0]).attr('maxlength',tmp[1]);

})