Dynamicaly Chaning the <textarea > size,style

Question

How can i change the field size diynamicaly?
I have a select field and there are 3 options with different values. So if the user selects one of them in the you see the values. But how can i change the size that the values from option field fits in the

function changeText()
        {

            var select       = document.getElementById("surl");
            var textfield    = document.getElementById("turl");
            var bold         = document.getElementById("burl");
            var link         = document.getElementById("linkText");

            if(bold.style.display == "none")
                bold.style.display = "";
           //if(link.innerHtml)

            bold.innerHtml   = select.value;
            //if(link.innerHTML !="")
               link.innerHTML= select.value;
            textfield.value  = select.value;

        }


<b>Sample: </b><select id="surl" onchange="changeText();" style="visibility: visible;" name="linkText">
         <option>Select LinkText</option>
         <option value="<a href='http://www.doesntexist.dsdsd/'&gt;Want sign? http://www.doesntexist.dsdsd&lt;/a&gt;"&gt;
            Variant1 
         </option>
          <option value="<a href='http://www.doesntexist.dsdsd/'&gt;Wanna killme? http://www.doesntexist.dsdsd&lt;/a&gt;"&gt;
            Variant 2
         </option>


     </select>
     <br />
    <div class="succes">
     <span id="burl" style="display: none"><br /><a id="linkText" href="http://www.doesntexist/"&gt;&lt;/a&gt;&lt;/span&gt;
     </div>
     </p>
     <p>

         <textarea  id="turl" style="">
        <a  href="http://www.doesntexist"&gt;text...&lt;/a&gt;
      </textarea>
     </p>

Answer 1

For example:

<script type="text/javascript">
document.getElementById("textarea_id").style.width = "300px";
document.getElementById("textarea_id").style.width = "200px";
</script>

Answer 2

A quick 'n' dirty jQuery solution would be the following:

$('input#foo-option-1').bind('change, click', function() {
 if ($(this).is(':checked')) {
   $('textarea').css('height', '150px');
 }
});

$('input#foo-option-2').bind('change, click', function() {
 if ($(this).is(':checked')) {
   $('textarea').css('height', '250px');
 }
});

$('input#foo-option-3').bind('change, click', function() {
 if ($(this).is(':checked')) {
   $('textarea').css('height', '350px');
 }
});

Of course, this code isn’t very DRY. Moreover, modifying CSS properties through JavaScript is never a very good idea — it’s better to add classes dynamically through JS and specify the actual CSS in your CSS files (duh).

Answer 3

First of all i thought there are more devs who can help; any way here is the answer

first create a function which calculates the strlen

function strlen(strVar)
{
   return(strVar.length)
}

Second create a var tfcount

var tfcount      = strlen(select.value);

and finaly

textfield.style.width   =  tfcount < 110 ? tfcount = 110 : 3.5*tfcount+"px";
textfield.style.height  =  tfcount < 110 ? tfcount = 110 : tfcount/2.5+"px";

Answer 4

Sorry, I must’ve misunderstood your problem.

So you want to resize a textarea dynamically based on what, its contents? You could use the jQuery autoResize plugin for this…