Multiple select box

Hi, I need help in code for multiple select box. The multiple select box should be populated with the db values.The selection done in the multiple select box is to be moved to the text area provided a add and remove buttons in between for moving the selected items into the text area.

View Answers

April 11, 2011 at 4:55 PM

<%@page import="java.sql.*"%>
<script>
var array = new Array();
function add() {
    var i=0;
    var ob=document.form.select;
    while(ob.selectedIndex != -1) {
        array.push(ob.options[ob.selectedIndex].value); 
        ob.options[ob.selectedIndex].selected = false;
        }
        for( i=0;i<array.length;i++){
        form.text.value+=array[i]+"\n";
        }
}
function remove(){
form.text.value="";
}

</script>
<form name="form">
<pre>
<select name="select" multiple>
<%
 Class.forName("com.mysql.jdbc.Driver").newInstance();  
 Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","root");  
 Statement stmt = con.createStatement();  
 ResultSet rs = stmt.executeQuery("Select * from employee");
 while(rs.next()){
%>
<option value="<%=rs.getString("name")%>"><%=rs.getString("name")%></option>
<%
 }
%>
</select>
<textarea rows="5" cols="20" name="text">

April 11, 2011 at 7:10 PM

<!DOCTYPE html>
<html>
<head>
  <style>
  div {
  color:red;
  }
  </style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
&lt;SCRIPT LANGUAGE="JAVASCRIPT">

$(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> 
<body>

<table>
<tr>
<td>
 <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>
</td>
<td>
  <div class="low container">
    <input name="left2right" value="add" type="button">
    <input name="right2left" value="remove" type="button">
  </div>
</td>
<td>
  <div class="container">
    <select name="itemsToAdd" id="right" size="8" multiple="multiple">
    </select>
  </div> 
</td>
</tr>
</table>

</body>
</html>

Try this....This works.....Download the js file by copy and pasting the js url in the address bar.