jquery dropdown and texline hides

Question

i have a drop down and two textbox with only two options the textboxs have certain max length if you click on a certain option in the drop down one textbox should dissapear with a new max length. if they decide to change their option again to something else the two text boxs should appear with their original max length. I need to do this using jQuery

Answer 1

I'm editing my answer as the maxlength property seems unreliable and I would recommend limiting the length manually in jQuery. You may need to modify this some but the following will limit your text boxes when changing select box options to either 6 or 12 max length, and show or hide the boxes, if you select show both it resets to the original length and displays both, here is a fiddle:

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

First store your variables:

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

To limit the length of your text areas:

$("#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));
  }    
});

Although you could call these functions instead of the code above I included both for verbosity, these are needed for reseting values back to original on selecting 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));
        }   
    }

And to get the value of your select and perform necessary actions:

    $('#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 would look like this:

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