Question

I decided to use jquery to create the duplicate of dropdown menus instead of using my perl script. I have come to an issue.

I have a series of drop boxes that I clone multiple times. The structure is like this:

<div id="org_dropmenus_asdf">
    <table border="0">
    <tr>
    <td valign="top">
        <select name="wimpy_asdf_1" id="wimpy_asdf_1" size="4">
          <option value='1'>1</option>
          <option value='2'>2</option>
        </select>;
    </td>
    <td valign="top">
        <select name="monkey_asdf_1" id="monkey_asdf_1" size="4">
          <option value='c'>c</option>
          <option value='d'>d</option>
        </select>;    
    </td>
            </tr>
            </table><p>
    </div>|;

I clone var $cloneDiv = $(‘#org_dropmenus_asdf’).clone();

How can search and replace the asdf_1 (“1”) and increment with new values?

Answer 1

You need to do something along the lines of this:

var counter = 1;
$cloneDiv = $('#org_dropmenus_asdf').clone().find('[id]').attr('id', function(idx, oldId){
    return oldId.substr(0, -1) + counter;
}).attr('name', function (idx, oldName) {
    return oldName.substr(0, -1) + counter;
});

You could do this repeatedly, incrementing counter each time. Note that this code will only work up to 9, because it removes the last character; more characters need to be removed above 10.

Note also that this doesn’t change the org_dropmenus_asdf id attribute, which also needs to be changed for a valid DOM.