Textarea maxlength下拉菜单

你可以使用

<input id="myInput" type="text" maxlength="2">
 <select>
  <option onclick='changeMaxLength(2)'>2</option>
  <option onclick='changeMaxLength(5)'>5</option>
  <option onclick='changeMaxLength(10)'>10</option>
</select>

和

function changeMaxLength(length) {
    jQuery("#myInput").attr('maxlength', length);
  }

您需要设置您的textarea的maxlength属性，以根据从下拉菜单中选择的值更改其长度。

HTML代码:

<textarea id="txtarea" maxlength="5"></textarea>
<select id="dropdown">
  <option value="5">Five</option>
  <option value="50">Fifty</option>
  <option value="100">Hundread</option>
</select>

JS代码:

$(function () {
  $('#dropdown').on('change', function () {
     $('#txtarea').attr('maxlength', $(this).val());
  });
});

Live Demo@ JSFiddle

可以使用 change() 监听变更事件， attr() 设置maxlength属性

更新:使用 val() 更新如果内容长度大于maxlength而改变下拉值

$('#len').change(function() {
  var len = this.value;
  $('#text').attr('maxlength', len).val(function(i, v) {
    return v.length > len? v.substring(0, len): v;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id=len>
  <option value=10>10</option>
  <option value=20>20</option>
  <option value=30>30</option>
  <option value=40>40</option>
</select>
<textarea maxlength=10 id=text></textarea>

这是一个不使用jquery的java脚本解决方案。
它会找到您选择的选项，然后为文本区域设置一个值。

var e = document.getElementById("list");
e.addEventListener("change", function() {
  var select = e.options[e.selectedIndex].value;
  var k = document.getElementById("area");
  k.innerHTML = "" + select;
  if (select == "first") {
    k.setAttribute("maxLength", 30);
  } else if (select == "second") {
    k.setAttribute("maxlength", 10);
    k.text = select;
  }
});

<select id="list">
  <option>first</option>
  <option>second</option>
  <option>third</option>
  <option>fourth</option>
</select>
<textarea id="area">
  test
</textarea>

这很容易做到，当select改变时，您需要改变textarea的maxlength属性。

唯一的问题是如果用户先点击"大"，然后回到"小"。你需要将字符串截断到较小的值长度。

<select id="text-size">
   <option value="10">small</option>
   <option value="20">medium</option>
   <option value="40">large</option>
</select>
<textarea id="textarea" maxlength="10"></textarea>

jQuery(document).ready(function($) {
    $('#text-size').on('change', function(event) {
       event.preventDefault();
       $textarea = $('#textarea');
       size = $(this).val();
       $textarea.attr('maxlength', size);
       $textarea.val($textarea.val().substr(0, size));
    });
});