Tuesday, 16 April 2013

Multiple Select Box onselect/onclick Jquery Event


Attaches a change event to the select that gets the text for each selected option and writes them in the div. It then triggers the event for the initial text draw.

!DOCTYPE html>
<html>
<head>
  <style>
  div { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
  <select name="garden" multiple="multiple">
 
    <option>Flowers</option>
    <option selected="selected">Shrubs</option>
    <option>Trees</option>
    <option selected="selected">Bushes</option>
 
    <option>Grass</option>
    <option>Dirt</option>
  </select>
  <div></div>
<script>
$("select").change(function () {
  var str = "";
  $("select option:selected").each(function () {
        str += $(this).text() + " ";
      });
  $("div").text(str);
})
.trigger('change');
</script>
 
</body>
</html>
Reactions:

0 comments:

Post a Comment

Leave a comment on blog quality.

Blogger

Related Posts Plugin for WordPress, Blogger...