Member Avatar for Faixan_1

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>
Edited by pritaeas because: Moved.
  • 1 Contributor
  • 1 Reply
  • 491 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by Faixan_1

Dani AI

Generated

The simplest, most reliable approach is to treat the rowed selects as dynamic elements and compute the sum of every third select (the .subject selects) whenever anything that can change them fires. Use delegated change handlers (so newly cloned rows are handled), parse option values safely, and update the .total input. In practice that means: 1) a small updateTotal() that sums numeric values from #filters .subject, 2) a delegated change listener on #filters for .semester/.department/.subject, and 3) call updateTotal() after you add/remove a row.

Example (drop this into your script after the chained setup):

function toNumber(v){
  v = (v||'').toString().replace(/[^0-9\.\-]/g,'');
  return parseFloat(v) || 0;
}

function updateTotal(){
  var total = 0;
  $('#filters .subject').each(function(){
    var $s = $(this);
    if ($s.prop('multiple')){
      $s.find('option:selected').each(function(){ total += toNumber(this.value); });
    } else {
      total += toNumber($s.val());
    }
  });
  $('.total').val(total.toFixed(2));
}

$('#filters').on('change', '.semester, .department, .subject', function(){
  // allow chained plugin to finish updating child selects
  setTimeout(updateTotal, 0);
});

// ensure totals update after adding/removing a row
$('#clone, #remove').on('click', function(){ setTimeout(updateTotal, 0); });

// initial total on page load
$(function(){ updateTotal(); });

Notes and troubleshooting:

  • The small regex in toNumber() strips currency symbols/commas so non-pure numeric option values still work.
  • setTimeout(..., 0) gives the chained plugin a tick to repopulate selects before summing.
  • Use classes and data-indexes rather than duplicate IDs when cloning to avoid collisions.
  • If totals are wrong, console.log() each .subject.val() to see what values are actually being set by the chained plugin (sometimes the plugin leaves an empty value or text like "Select...").

This ties into ’s approach: keep the cloning and chaining, but add the delegated change handler and safe parsing so every added row contributes its third-select value into the total field.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.