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>

jquery下拉和texline隐藏

1 个答案: