Add dropdown list dynamically using Jquery and also cloning that dropdown list?

Question

I have the code for cloning elements but how to auto populate the second one according to the result selected in the first drop down list?

This is a code i found for cloning.

<table id="BoxTable">
<tr>
    <th>Name</th>
    <th>Comparision</th>
    <th>Value</th>
    <th>Delete</th>
</tr>
<tr id="TemplateRow">
    <td>
        <select name="BoxName" id="BoxName">
            <option selected="selected" value="attr1">attr1</option>
            <option value="attr2">attr2</option>
            <option value="attr3">attr3</option>

        </select>
    </td>
    <td>
        <select name="BoxComparison" id="BoxComparison">
            <option selected="selected" value="=">=</option>
            <option value=">">&gt;</option>
            <option value="&lt;">&lt;</option>
            <option value="Like">Like</option>
            <option value="!=">!=</option>
        </select>
    </td>
    <td>
        <input name="BoxVal" type="text" id="BoxVal" />
    </td>
    <td>
        <input id="DeleteBoxRow" type="checkbox" name="DeleteBoxRow" />
    </td>
</tr>
<tr>
    <td colspan="4">
        <input type="submit" name="AddAttr" value="Add Box Attribute" id="AddAttr" />
    </td>
</tr>
</table>

Now jQuery...

$(function() {
//attach the a function to the click event of the "Add Box Attribute button that
will add a new row
$('#AddAttr').click(function() {
//clone the template row, and all events attached to the row and everything in it
var $newRow = $('#TemplateRow').clone(true);

//strip the IDs from everything to avoid DOM issues
$newRow.find('*').andSelf().removeAttr('id');

//add the cloned row to the table immediately before the last row
$('#BoxTable tr:last').before($newRow);

    //to prevent the default behavior of submitting the form

    return false;
});

//attach a remove row function to all current and future instances of the   
"remove row" check box
$('#DeleteBoxRow').click(function() {
    //find the closest parent row and remove it
    $(this).closest('tr').remove();
});

//finally, add an initial row by simulating the "Add Box Attribute" click
$('#AddAttr').click();
});

Please help me..

Anthony Pegram · Accepted Answer · 2011-12-22 03:03:21Z

2

Check out the solutions here http://jsfiddle.net/dSgdD/2/

edited Dec 22, 2011 at 3:03

Anthony Pegram

128k28 gold badges229 silver badges252 bronze badges

answered Jun 28, 2011 at 8:22

Ian Jasper

3,0787 gold badges39 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

nikunj2512 Over a year ago

It is not auto populating a dropdown list on changing the values of column "name" containing dropdown list ..

Ian Jasper Over a year ago

First thing that you need to do is to make your question more understandable. I've been guessing most of the time on what you really wanted to achieve. How about rephrasing your question and read your question once again and see if you understand what you've been asking.

nikunj2512 Over a year ago

I clearly mentioned that how to auto populate second dropdwon list according to the result of the first dropdownlist.

Transformer Over a year ago

hi this does not work with jquery 3.1 should i change the event

Collectives™ on Stack Overflow

Add dropdown list dynamically using Jquery and also cloning that dropdown list?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related