I have a form user interface according to which several sections require that the duplicate HTML select list is dynamically updated from one dynamically updated select list.
A dynamically updated list works very well, as new parameters can be added and removed on the fly. Then I can get this update for distribution through each of the duplicate lists using jQuery.find (). I even added some logic to maintain the current selected index of the original select list.
What I cannot do is save the selected state of each of the duplicate lists, as new parameters are added and removed from the original selection list. Since each update of the original selection list is repeated through each duplicate selection list, they lose their current selected parameter.
Here is an example of my puzzle - * EDIT . I would advise you to try and execute the code that I provided below and apply your theories before proposing a solution, since none of the sentences have worked so far. I believe that you will find this problem much more complicated than you might have expected at first:
<form> <div id="duplicates"> <select> </select> <select> </select> <select> </select> </div> <div> <input type="button" value="add/copy" onclick="var original_select = document.getElementById('original'); var new_option = document.createElement('option'); new_option.text = 'Option #' + original_select.length; new_option.value = new_option.text; document.getElementById('original').add(new_option); original_select.options[original_select.options.length-1].selected = 'selected'; updateDuplicates();" /> <input type="button" value="remove" onclick="var original_select = document.getElementById('original'); var current_selected = original_select.selectedIndex; original_select.remove(original_select[current_selected]); if(original_select.options.length){original_select.options[current_selected < original_select.options.length?current_selected:current_selected - 1].selected = 'selected';} updateDuplicates();" /> <select id="original"> </select> </div> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> function updateDuplicates(){ $("#duplicates").find("select").html($("#original").html()); } </script> </form>
It is important to note that duplicate HTML picklists should remain somewhat arbitrary, if at all possible (i.e. no identifiers), since this method should be applied in general to other dynamically created picklists in the document.
Thanks in advance!
source share