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

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">&nbsp; <div class="col-sm-6">&nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; <label class="required">Select Type</label>&nbsp; &nbsp; &nbsp; <select class="form-control" id="prooftype">&nbsp; &nbsp; &nbsp; &nbsp; <option value="0/0" disabled> </option>&nbsp; &nbsp; &nbsp; &nbsp; <option value="10/16">name1</option>&nbsp; &nbsp; &nbsp; &nbsp; <option value="20/32">name2</option>&nbsp; &nbsp; &nbsp; &nbsp; <option value="30/48">name3</option>&nbsp; &nbsp; &nbsp; &nbsp; <option value="40/64">name4</option>&nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <div class="col-sm-6">&nbsp; &nbsp; <div class="form-group md-form">&nbsp; &nbsp; &nbsp; <label class="required" for="id" data-error="wrong" data-success="right">&nbsp; &nbsp; &nbsp; &nbsp; <i class="fa fa-info pr-2"></i>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; Enter Identity Card Number&nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; <input id="id" type="text" minlength="3" class="form-control validate" autocomplete="off" onkeypress="return blockSpecialChar(event)"&nbsp; maxlength="20" />&nbsp; &nbsp; </div>&nbsp; </div></div>和 jQuery$('#prooftype').change(function(){var tmp = $(this).val().split('/');&nbsp; &nbsp; $('input#id').attr('minlength',tmp[0]).attr('maxlength',tmp[1]);})