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

})

Answer 2

如果将选项List<Torrent> torrents = response.Result.Torrents.ToList();传递给后端，则显然数据将反映出来。我认为您需要这样的东西：

12/16

还有您的JQuery

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

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

2 个答案: