dropdown field add and remove with jquery

dropdown field add and remove with jquery



<html>
<head>
 <script src="js/jquery.js" type="text/javascript"></script>
 <script type="text/javascript">
  $().ready(function() {
   $('#add').click(function() {
    return !$('#select1 option:selected').remove().appendTo('#select2');
   });
   $('#remove').click(function() {
    return !$('#select2 option:selected').remove().appendTo('#select1');
   });
  });
 </script>

 <style type="text/css">
  a {
   display: block;
   border: 1px solid #aaa;
   text-decoration: none;
   background-color: #fafafa;
   color: #123456;
   margin: 2px;
   clear:both;
  }
  div {
   float:left;
   text-align: center;
   margin: 10px;
  }
  select {
   width: 100px;
   height: 80px;
  }
 </style>

</head>


<body>
 <div>
  <select multiple id="select1">
   <option value="1">Option 1</option>
   <option value="2">Option 2</option>
   <option value="3">Option 3</option>
   <option value="4">Option 4</option>
  </select>
  <a href="#" id="add">add &gt;&gt;</a>
 </div>
 <div>
  <select multiple id="select2"></select>
  <a href="#" id="remove">&lt;&lt; remove</a>
 </div>
</body>
</html>

Labels:

javascript clear textarea on click

javascript clear textarea on click


<form name="myform">
<textarea name="mytext" cols="30" rows="5"
onclick="document.myform.mytext.value='';">
This text will disappear when you click the textarea with the mouse</textarea>
</form>
Labels: ,

select list add and remove php jquery

select list add and remove php jquery demo



<script type="text/javascript" src="http://localhost/online/jquery.js"></script>

<script>
$(function() {
  $(".low input[type='button']").click(function(){
    var arr = $(this).attr("name").split("2");
    var from = arr[0];
    var to = arr[1];
    $("#" + from + " option:selected").each(function(){
      $("#" + to).append($(this).clone());
      $(this).remove();
    });
  });
})
</script>
<div class="container">
    <select name="itemsToChoose" id="left" size="8" multiple="multiple">    
      <option value="1">item1</option>
      <option value="2">item2</option>
      <option value="3">item3</option>
      <option value="4">item4</option>
      <option value="5">item5</option>
    </select>
  </div>

  <div class="low container">
    <input name="left2right" value="add" type="button">
    <input name="right2left" value="remove" type="button">
  </div>

  <div class="container">
    <select name="itemsToAdd" id="right" size="8" multiple="multiple">
    </select>
  </div>









Labels: ,
Subscribe to: Posts (Atom)