-3

i have a combo box in html and text box where i input some text i want when i select any number from combo box then size of text which is in text box change according to that how to do this please help me

Thanks in advance

Improve this question
2

3 Answers 3

Reset to default
3

You can use jQuery To Simple down the code

LAB DEMO

HTML CODE:

<input type="text" value="Sample Text" id="txtBox" name="name">
<br>
<select id="fontSizeDD">
  <option value='12'>12</option>
  <option value='14'>14</option>
  <option value='16'>16</option>
  <option value='18'>18</option>
  <option value='20'>20</option>
  <option value='22'>22</option>
  <option value='24'>24</option>
  <option value='26'>26</option>
</select>

jQuery CODE :

$(function(){
  $("#fontSizeDD").change(function(){
$("#txtBox").css("font-size",$(this).val() + "px");
})
});

Pure JavaScript Solution

var fontSizeDD = document.getElementById('fontSizeDD');
fontSizeDD.onchange = function () {
    var txtBox = document.getElementById("txtBox")
    txtBox.style.fontSize = this.value +"px";
};
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

While jQuery is a great alternative and maybe even something OP is using, the question was asking for a JavaScript solution and was also not tagged with jQuery. The answer should include a JavaScript solution in the least.
I will add Pure JavaScript Solution as well Thanks
@FrançoisWahl : I have added Pure JS solution as well ;)
1

If you use jQuery you can write an on change handler for the combo box and use

$("#textBox").css("font-size",$(this).val() + "px");

Like

$("#comboBox").change(function() {
  $("#textBox").css("font-size",$(this).val() + "px");
});
Improve this answer

1 Comment

While jQuery is a great alternative and maybe even something OP is using, the question was asking for a JavaScript solution and was also not tagged with jQuery. The answer should include a JavaScript solution in the least.
-1

This is a fully working example: (available on jsbin link)

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-git2.js"></script>
  <meta charset="utf-8">
  <title>Text Area Size</title>
</head>
<body>
<select onchange="$('#txt').css('font-size', event.target.value + 'px')">
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="30">30</option>
</select>
  <textarea id="txt">Test Test</textarea>
</body>
</html>
Improve this answer

5 Comments

I Will not prefer inline JS CODE
Do not use inline JavaScript as it breaks the clean separation that should exist between markup, presentation and behaviour. In addition if your scripts are loading at the bottom of your page it is possible for a user to interact with your page, triggering the event attempting to call code which has not been loaded yet.
In addition, while jQuery is a great alternative and maybe even something OP is using, the question was asking for a JavaScript solution and was also not tagged with jQuery. The answer should include a JavaScript solution in the least.
Well... the OP did select the jQuery answer
@Ben: and the acceped answer also contains a JavaScript solution as OP did not specify the need for jQuery in the original post. In general it is very bad practice to only provide solutions in a language or library other than what is requested in a question. Though there is nothing wrong with adding them on top of solutions using the requested technologies.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.