display selected item from dropdown onchange function into html label through javascript , please help how to it

Question

<form  method="post">
  <select name="users" id="users" onchange="showUser(this.value)" value="">
    <option value="">Select a person:</option>
    <option value="1" onchange="copy();">tcs</option>
    <option value="2" onchange="copy();">wipro</option>
    <option value="3" onchange="copy();">Hcl</option>
    <option value="4" onchange="copy();">krystal kones</option>
  </select>
</form>

I have this drop down i want that when the value is changed like tcs,wipro or hcl then that value should shown in html label

Answer 1

Try putting the onChange attribute in the select tag.

Example: http://jsfiddle.net/r6Fus/

HTML:

<div id="label"></div>
<select id="mySelect" onchange="copy();">
    <option value="">Select a person:</option>
    <option value="tcs" >tcs</option>
    <option value="wipro" >wipro</option>
    <option value="Hcl" >Hcl</option>
    <option value="krystal kones" >krystal kones</option>
</select>

Javascript:

function copy() {
    document.getElementById("label").innerHTML = document.getElementById("mySelect").value
}

Otherwise you could use jQuery.

Answer 2

First of all, the onchange event is for the select element, not the option elements. Those don't actually change. Also, you have two JavaScript functions. showUser() and copy(). But you describe only one piece of functionality. What do these two functions do?

As for showing the text in the label, here's one way to do it (using jQuery, because everybody does):

$(document).ready(function() {
  $('#users').change(function() {
    $('#myLabel').text($(this).val());
  });
});

What this is basically doing is:

1. Wait until the DOM is loaded and ready.
2. Bind a function to the change event of the specified select element.
3. The function contains one line, which sets the text of the specified label to the value of the select.