dependent drop down list remove/add selections

dependent drop down list remove/add selections


Hello,  the code below has worked for me but unfortunately I am not an advanced enough coder to enhance the code the way I need it to be.

What I need is the value of each options, to add |~|value_name.

For example, if the first option is selected  Cohort A, I need the value to be  Cohort A|~| Cohort A.

Any tips to point me in the right direction would be greatly appreciated.  I know I need to improve my coding skills!

Oh I forgot to mention, the purpose of the drop down menu is that I have 5 of them.  When one is selected, that item disappears from the remaining drop down menus.  So by the time selections are made in the first 4 select menus, the 5th select menu has only one item remaining.

Peter T


  1. //dependent drop down list
  2. $(document).ready(function() {
  3. var txtCoh = 'Select Cohort';
  4. var cohorts = ['Cohort A','Cohort B','Cohort C','Cohort D','Cohort E'];
  5. var used = [];
  6. $(function() {
  7. $("select.cohorts").each(function() {
  8. $this = $(this);
  9. $('<option/>').text( txtCoh ).val( txtCoh ).appendTo( $this );
  10. $.each(cohorts,function(c,v) {
  11. $('<option/>').text( v ).val( v ).appendTo( $this );
  12. });
  13. });
  14. $("select.cohorts").on('change',function() {
  15. used = $.map( $("select.cohorts").filter(function() { return $(this).val() !== txtCoh; }), function(v,c) { return v.value; });
  16. $("select.cohorts").each(function(c,v) {
  17. var $this = $(this);
  18. var val = $this.val();
  19. $this.html('');
  20. $('<option/>').text( txtCoh ).val( txtCoh ).appendTo( $this );
  21. $.each(cohorts,function(c,v) {
  22. ($.inArray(v, used) > -1 && (v !== val) ) || $('<option/>').text( v ).val( v ).appendTo( $this );
  23. });
  24. $this.val( val );
  25. });
  26. });
  27.                   });
  28.        });