根据上一个下拉列表中选择的选项设置文本字段最小值和最大值

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

你必须稍微改变你的代码

<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]);

})