Hi
when i click on a link and there are three select box populated dynamically now i want to change the first select box value and want to add the third one select box value add.as much as i populated select box all the value of third select box is add to a text field.how to do this in jquery.
thanx in advance
below is the code to add three select box dynamically through jquery.
$(window).load(function(){
$(function() {
// variable to number the added filters, starting with 1
var i = 1;
// this function clones the filter from the hidden template
// when user clicks the + sign
$('#clone').click(function() {
// clone the three select elements from the template div
// and append it to the filters div
$('#template').clone().appendTo('#filters');
// in the filters div change the cloned template div's id attribute
// from 'template' to 'filter' + i
// and show the div (the template's div has display:none property)
$('#filters #template').attr('id', 'filter' + i).show();
// also change the three selects' id
// and name attributes (append ther current i to them)
$('#filters #semester').attr('id', 'semester' + i).attr('name', 'semester' + i);
$('#filters #department').attr('id', 'department' + i).attr('name', 'department' + i);
$('#filters #subject').attr('id', 'subject' + i).attr('name', 'subject' + i);
// with the chainItWithId() chain the select elements (depending on their id)
chainItWithId(i);
// increase the number i
i++;
});
// this function removes the last div within the div with id=filters
$('#remove').click(function() {
$('#filters > div').last().remove();
});
});
// this function chains the three select elements together
// using the Chained Selects jQuery Plugin
// see http://www.appelsiini.net/projects/chained
function chainItWithId(id) {
// the chaining occurs in the last appended div ('#filter' + id)
var targetDiv = '#filter' + id;
// chain the divs in the targetDiv
$(targetDiv + ' .department').chained(targetDiv + ' .semester');
$(targetDiv + ' .subject').chained(targetDiv + ' .department');
}
// on load fire the click event to create the first set of filters
// (the template remains hidden)
$('#clone').click();
});//]]>
</script>
// this is html and php code for select box..
<div id="filter">
<a id="clone" href="#">+</a>
<a id="remove" href="#">-</a>
</div>
<form name="request" action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">
<!-- Beginning ot he hidden div containing the template for the filter -->
<div id="template" style="display:none;">
<select class="semester" id="semester" name="semester">
<option value="">---select subject--</option>
<?php
$sql=mysql_query("select * from `test_info`") or die();
while($row=mysql_fetch_array($sql))
{
?>
<option value="<?php echo $row['test_name'];?>"><?php echo $row['test_name'];?></option>
<?php }?>
</select>
<select class="department" id="department" name="department">
<?php
$sql1=mysql_query("select * from `test_info`") or die();
while($row1=mysql_fetch_array($sql1))
{
?>
<option value="<?php echo $row1['sample'];?>" class="<?php echo $row1['test_name'];?>"><?php echo $row1['sample'];?></option>
<?php }?>
</select>
<select class="subject" id="subject" name="subject">
<?php
$sql2=mysql_query("select * from `test_info`") or die();
while($row2=mysql_fetch_array($sql2))
{
?>
<option value="<?php echo $row2['rate'];?>" class="<?php echo $row2['sample'];?>"><?php echo $row2['rate'];?></option>
<?php }?>
</select>
</div>
<!-- End ot he hidden div containing the template for the filter -->
<!-- This is where all the filters will be placed -->
<div id="filters">
</div>
<input type="text" value="0" class='total'>
<input type="submit" name="submit" value="submit" />
</form>