QuestionAsk Questions?
premika
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>
<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.
Related Pages:
If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.
Ask your questions, our development team will try to give answers to your questions.
Tutorial Topics
