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
- //dependent drop down list
- $(document).ready(function() {
- var txtCoh = 'Select Cohort';
- var cohorts = ['Cohort A','Cohort B','Cohort C','Cohort D','Cohort E'];
- var used = [];
- $(function() {
- $("select.cohorts").each(function() {
- $this = $(this);
- $('<option/>').text( txtCoh ).val( txtCoh ).appendTo( $this );
- $.each(cohorts,function(c,v) {
- $('<option/>').text( v ).val( v ).appendTo( $this );
- });
- });
- $("select.cohorts").on('change',function() {
- used = $.map( $("select.cohorts").filter(function() { return $(this).val() !== txtCoh; }), function(v,c) { return v.value; });
- $("select.cohorts").each(function(c,v) {
- var $this = $(this);
- var val = $this.val();
- $this.html('');
- $('<option/>').text( txtCoh ).val( txtCoh ).appendTo( $this );
- $.each(cohorts,function(c,v) {
- ($.inArray(v, used) > -1 && (v !== val) ) || $('<option/>').text( v ).val( v ).appendTo( $this );
- });
- $this.val( val );
- });
- });
- });
- });