jQuery下拉菜单和texline隐藏

Question

我有一个下拉菜单和两个只有两个选项的文本框，如果单击下拉菜单中的某个选项，则该文本框将具有一定的最大长度，而新的最大长度将消失。 如果他们决定再次将其选项更改为其他选项，则两个文本框应以其原始最大长度出现。 我需要使用jQuery

Answer 1

我正在编辑我的答案，因为maxlength属性似乎不可靠，建议您在jQuery中手动限制长度。 您可能需要对此进行一些修改，但是在将选择框选项更改为最大长度为6或12时，以下内容将限制您的文本框，并显示或隐藏这些框，如果您选择同时显示两者，则会重置为原始长度并同时显示两个，这是一个小提琴：

https://jsfiddle.net/edencorbin/kvmsuqv8/

首先存储您的变量：

    var originalLength1 = 8;
    var originalLength2 = 9;
    var box1max = 8;
    var box2max = 9;

限制文本区域的长度：

$("#mytextbox1").keyup(function(){
 if($(this).val().length > box1max){
   $(this).val($(this).val().substr(0, box1max));
 }
});

$("#mytextbox2").keyup(function(){
  if($(this).val().length > box2max){
   $(this).val($(this).val().substr(0, box2max));
  }    
});

尽管您可以调用这些函数，而不是上面的代码（我为冗长而包括了这两个代码），但是在选择showboth时将它们重置为原始值时需要这些函数：

    function setBox1(){
        if($("#mytextbox1").val().length > box1max){
           $("#mytextbox1").val($("#mytextbox1").val().substr(0, box1max));
        }   
    }

    function setBox2(){
        if($("#mytextbox2").val().length > box2max){
           $("#mytextbox2").val($("#mytextbox2").val().substr(0, box2max));
        }   
    }

并获得选择的价值并执行必要的操作：

    $('#myselect').on('change', function (e) {
      var optionSelected = $("option:selected", this);
      var valueSelected = this.value;
      if (valueSelected==0){
        box1max = originalLength1;
        box2max = originalLength2;
        setBox1();
        setBox2();
        $("#firstBoxDiv").show();
        $("#secondBoxDiv").show();
      }
      if (valueSelected==6){
        box1max = 6;
        box2max = 6;

        $("#firstBoxDiv").show();
        $("#secondBoxDiv").hide();
      }
      if (valueSelected==12){
        box1max = 12;
        box2max = 12;
        $("#firstBoxDiv").hide();
        $("#secondBoxDiv").show();
      }
    });

HTML看起来像这样：

    <select id="myselect">
      <option value="6">setboxeslength-6</option>
        <option value="12">setboxeslength-12</option>
          <option value="0">showOriginalBoxes</option>
    </select> 

     <div id="firstBoxDiv">
      <textarea id="mytextbox1">

    </textarea> 
     </div>

    <div id="secondBoxDiv">
     <textarea id="mytextbox2">

    </textarea> 
    </div>