Showing posts with label list add and remove. Show all posts
Showing posts with label list add and remove. Show all posts
Select list add and remove in php using jquery
Posted by Raj
Select list add and remove in php using jquery:
In this article,I will show how to select list add and remove in PHP using Jquery with simple example.
Suppose I have 2 list box . The first box is populated with Characters. I have two buttons (add, remove). When the button is press it take the select element from list1 and put it in list2.
Example:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(function() {
$(".middle input[type='button']").click(
function(){
var listArr = $(this).attr("name").split("_");
var list1 = listArr[0];
var list2 = listArr[1];
$("#" + list1 + " option:selected").each(function(){
$("#" + list2).append($(this).clone());
$(this).remove();
});
});
})
</script>
<table width=50%>
<tr>
<td>
<select name="items1" id="first" size="5" multiple="multiple">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
<option value="5">E</option>
</select>
</td>
<td>
<div class="middle">
<input name="first_second" value=">>" type="button">
<input name="second_first" value="<<" type="button">
</div>
</td>
<td>
<select name="items" id="second" size="5" multiple="multiple">
</select>
</td>
</tr>
</table>
</body>
</html>
In this article,I will show how to select list add and remove in PHP using Jquery with simple example.
Suppose I have 2 list box . The first box is populated with Characters. I have two buttons (add, remove). When the button is press it take the select element from list1 and put it in list2.
Example:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(function() {
$(".middle input[type='button']").click(
function(){
var listArr = $(this).attr("name").split("_");
var list1 = listArr[0];
var list2 = listArr[1];
$("#" + list1 + " option:selected").each(function(){
$("#" + list2).append($(this).clone());
$(this).remove();
});
});
})
</script>
<table width=50%>
<tr>
<td>
<select name="items1" id="first" size="5" multiple="multiple">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
<option value="5">E</option>
</select>
</td>
<td>
<div class="middle">
<input name="first_second" value=">>" type="button">
<input name="second_first" value="<<" type="button">
</div>
</td>
<td>
<select name="items" id="second" size="5" multiple="multiple">
</select>
</td>
</tr>
</table>
</body>
</html>