How to duplicate a dropdown with onchange event
-
Hi everyone,
I have 2 chained select : when a value is choose in the first one (country), the second select show some values (universities of country chosen) that correspond to the first select.
<script>function display_univ(obj){ $.get("folder/themes/mytheme/lib/cities.php?val="+obj.value+"&id=universities&func=0", function(data){ if(data.length >0) { $('#fclt'+obj.parentNode.parentNode.id).html(data); } }); }</script> <!-- Select Country--> <h2 id='country'>Country</h2> <select id="cities" name="cities" style="width: 24em;"onchange="display_univ(this)" required=""> <option value="" selected="selected" disabled="disabled">Country</option> <option value="Any Country">Any Country</option><?php echo ModelUnivesity::newInstance()->load_country();?></select> <!-- Select University--> <h2 id="university">University</h2> <select id="fclt" name="fclt" style="width: 24em;" required=""> <option value="" selected="selected" disabled="disabled">Select University</option> <option value="Any University">Any University</option></select>
The problem is that when I cloned my form, the university dropdown of the second contained the values of the first country choice, and when choose another country in the second form, the first dropdown value of university have changed.
There is my code to clone the form:
<script> $(function () { $('#btnAdd').click(function () { var num = $('.clonedInput').length, // Checks to see how many "duplicatable" input fields we currently have newNum = new Number(num + 1), // The numeric ID of the new input field being added, increasing by 1 each time newElem = $('#entry' + num).clone().attr('id', 'entry' + newNum).fadeIn('slow'); // create the new element via clone(), and manipulate it's ID using newNum value // Country - select newElem.find('.label_cnt').attr('for', 'ID' + newNum + '_country'); newElem.find('.do_input_new').attr('id', 'ID' + newNum + '_cities').attr('name', 'ID' + newNum + '_cities').val([]); // University - select newElem.find('.label_uni').attr('for', 'ID' + newNum + '_university'); newElem.find('.do_input_new').attr('id', 'ID' + newNum + '_fclt').attr('name', 'ID' + newNum + '_fclt').val([]); }); }); </script>
Any help will be appreciated!!
Thanks in advance
- The topic ‘How to duplicate a dropdown with onchange event’ is closed to new replies.