Based on each selection from a select box disable same option in 3 other select boxes and show another select box based on value selected

1) I have 4 location select boxes with options like full chest, full back, front left chest, front right chest and so on. If full chest is selected in any one of the select boxes then front left chest and front right chest should be disabled in the remaining 3 select boxes.

2) Also If one option is selected in one of the select boxes that option should be disabled in the remaining 3 select boxes. ( I have this part working )

3) Also based on the selected value, I am trying to display another select boxes named colors.

I am stuck at 1) and 3 ). here is my complete code and here is jFiddle link. Thanks and appreciate it

jFiddle

HTML:

<div class="pc-row">
	<ul class="locations-colors noul pc-col">
	<li>
	  <h4>Choose location one below</h4>
	   <label for="location_one"><span>Location One</span>
	    <select name="location_one" id="location_one">
         <option value="">choose location</option>
		 <option value="full_chest">Full Chest</option>
		 <option value="full_back">Full Back</option>
         <option value="front_left_chest">Front Left Chest</option>
         <option value="front_right_chest">Front Right Chest</option>
         <option value="left_sleeve">Left Sleeve</option>
		 <option value="right_sleeve">Right Sleeve</option>		 
        </select></label>
	</li>
     <li>
	  <h4>Choose location two below</h4>
	   <label for="location_two"><span>Location two</span>
	    <select name="location_two" id="location_two">
         <option value="">choose location</option>
		 <option value="full_chest">Full Chest</option>
		 <option value="full_back">Full Back</option>
         <option value="front_left_chest">Front Left Chest</option>
         <option value="front_right_chest">Front Right Chest</option>
         <option value="left_sleeve">Left Sleeve</option>
		 <option value="right_sleeve">Right Sleeve</option>		 
        </select></label>
	</li>
	</ul>
		<ul class="locations-colors noul pc-col">
	<li>
	  <h4>Choose location three below</h4>
	   <label for="location_three"><span>Location Three</span>
	    <select name="location_three" id="location_three">
         <option value="">choose location</option>
		 <option value="full_chest">Full Chest</option>
		 <option value="full_back">Full Back</option>
         <option value="front_left_chest">Front Left Chest</option>
         <option value="front_right_chest">Front Right Chest</option>
         <option value="left_sleeve">Left Sleeve</option>
		 <option value="right_sleeve">Right Sleeve</option>		 
        </select></label>
	</li>
     <li>
	  <h4>Choose location four below</h4>
	   <label for="location_four"><span>Location four</span>
	    <select name="location_four" id="location_four">
         <option value="">choose location</option>
		 <option value="full_chest">Full Chest</option>
		 <option value="full_back">Full Back</option>
         <option value="front_left_chest">Front Left Chest</option>
         <option value="front_right_chest">Front Right Chest</option>
         <option value="left_sleeve">Left Sleeve</option>
		 <option value="right_sleeve">Right Sleeve</option>		 
        </select></label>
	</li>
	</ul>
	</div>

Open in new window


jQuery

	$('select[name*="location"]').change(function() {
    var selectedOptions = $('select option:selected');
    $('select option').removeAttr('disabled');

    selectedOptions.each(function() {        
        var value = this.value;
        if (value != ''){           
        var id = $(this).parent('select').attr('id');
        var options = $('select:not(#' + id + ') option[value=' + value + ']');
        options.attr('disabled', 'true');
        }
    });


});

Open in new window

LVL 2
niceoneishereAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Leonidas DosasCommented:
I have comments inside the code about how I work to solve this. Something corresponding use to other select option elements.

$('select[name*="location"]').change(function() {
    var selectedOptions = $('select option:selected');
    $('select option').removeAttr('disabled');

    selectedOptions.each(function() {        
        var value = this.value;
        //I create a new var for the word chest beacause this word is the common word of all clothes parts contains chest  parts
        var chest='chest';
        if (value != ''){           
        var id = $(this).parent('select').attr('id');
        var options = $('select:not(#' + id + ') option[value=' + value + ']');
        //From the following line I get the select element that don't belong to select with id 
        var option_2=$('select:not(#' + id + ') option');
        //I use the each function for all the above line elements
        option_2.each(function(){
        //I took the value of each one by one and then I get the last word until th function reading "_"
        var newS=$(this).val();
        newS=newS.split("_").pop();
        //With the following if condtition I set the attr disabled at any element that contains chest
        if(newS==chest){
        $(this).attr('disabled', 'true');        
        }         
        });
        options.attr('disabled', 'true');        
        }
    });

});

Open in new window

0
Julian HansenCommented:
Question: any reason you are using multiple listboxes rather than a single - multi-select listbox?
0
niceoneishereAuthor Commented:
Hi Guys,

Thanks for replying, the reason I am using multiple listboxes is because, each location after the first location is charged a dollar,  I am open to suggestions.

Here is a website which is doing something I am trying to achieve.

http://www.redbrickclothing.com/rbcmall/custom/application/1#quote

The only difference is I don't know if they are charging for locations.

I have mine on localhost but I will try to upload to my dev site to show you what I am trying to do tomorrow.

Thanks and appreciate it
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Julian HansenCommented:
The reference link doesn't appear to be hiding options.
This probably will do the trick
HTML
<div class="pc-row">
	<ul class="locations-colors noul pc-col">
	<li>
	  <h4>Choose location one below</h4>
	   <label for="location_one"><span>Location One</span>
	    <select name="location_one" id="location_one">
         <option value="">choose location</option>
		 <option value="full_chest" data-exclude="front_left_chest,front_right_chest">Full Chest</option>
		 <option value="full_back">Full Back</option>
         <option value="front_left_chest">Front Left Chest</option>
         <option value="front_right_chest">Front Right Chest</option>
         <option value="left_sleeve">Left Sleeve</option>
		 <option value="right_sleeve">Right Sleeve</option>		 
        </select></label>
	</li>
     <li>
	  <h4>Choose location two below</h4>
	   <label for="location_two"><span>Location two</span>
	    <select name="location_two" id="location_two">
         <option value="">choose location</option>
		 <option value="full_chest" data-exclude="front_left_chest,front_right_chest">Full Chest</option>
		 <option value="full_back">Full Back</option>
         <option value="front_left_chest">Front Left Chest</option>
         <option value="front_right_chest">Front Right Chest</option>
         <option value="left_sleeve">Left Sleeve</option>
		 <option value="right_sleeve">Right Sleeve</option>		 
        </select></label>
	</li>
	</ul>
		<ul class="locations-colors noul pc-col">
	<li>
	  <h4>Choose location three below</h4>
	   <label for="location_three"><span>Location Three</span>
	    <select name="location_three" id="location_three">
         <option value="">choose location</option>
		 <option value="full_chest" data-exclude="front_left_chest,front_right_chest">Full Chest</option>
		 <option value="full_back">Full Back</option>
         <option value="front_left_chest">Front Left Chest</option>
         <option value="front_right_chest">Front Right Chest</option>
         <option value="left_sleeve">Left Sleeve</option>
		 <option value="right_sleeve">Right Sleeve</option>		 
        </select></label>
	</li>
     <li>
	  <h4>Choose location four below</h4>
	   <label for="location_four"><span>Location four</span>
	    <select name="location_four" id="location_four">
         <option value="">choose location</option>
		 <option value="full_chest" data-exclude="front_left_chest,front_right_chest">Full Chest</option>
		 <option value="full_back">Full Back</option>
         <option value="front_left_chest">Front Left Chest</option>
         <option value="front_right_chest">Front Right Chest</option>
         <option value="left_sleeve">Left Sleeve</option>
		 <option value="right_sleeve">Right Sleeve</option>		 
        </select></label>
	</li>
	</ul>
</div>

Open in new window

jQuery
<script>
$(function() {
  $('select[name*="location"]').change(function() {
    // get the excluded options
	var exclude = [];
    $('option:selected').each(function(i,e) {
		var extra = ($(e).data('exclude') || '').split(',');
		extra.push(e.value);
		$.merge(exclude, extra);
	});
	
    // loop through options and set disabled PROPERTY
    // based on whether value is in exclude array
	var options = $('select option');
	options.each(function(i, e) {
	    // SPECIFICALLY CHECK FOR EMPTY OPTION SO WE HAVE A WAY
		// TO CLEAR SELECTION
		var state = e.value == '' ? false : exclude.indexOf(e.value) != -1;
		$(this).prop('disabled', state);
	});
  });   
});
</script>

Open in new window


Working sample here
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
niceoneishereAuthor Commented:
Hi Julian,

Yes this is what I am looking for, But the only problem I come across in the sample you have provided is that if location contains full chest, in that location its disabling front left chest and front right chest. I will only want these options to be disabled in the remaining locations other than the full chest one.

Hope I am explaining my self properly. Thanks and appreciate it
0
Julian HansenCommented:
Hope I am explaining my self properly. Thanks and appreciate it
Yes - I was aware it was not 100% - but wanted to check first before I made changes.
0
niceoneishereAuthor Commented:
I am sorry my intention was not to offend you in anyway sir, I am stuck at this for a long time hence I was trying to explain as best as I can.
0
Julian HansenCommented:
No offence, just letting you know that you are getting answers.

I suggest you close one of the threads and we can continue with the remaining one..
0
niceoneishereAuthor Commented:
Hi Julian,

I re-did my approach, instead of showing all the location and color boxes at once. I am showing location one and color one select box, and increment them by using add one more location button or removing them by using remove location button. I am also resetting the select box of a particular location and its color, if that location is removed.

here is updated preview click sir:

New Preview with one default location and color

Now the only part left is to disable front left and front right if location one has full chest in the remaining 3 and of course disabling the selected option also.

So for example:

1) Location one: Full Chest then location 2, 3, 4 should have full chest, front left and front right

2) location one : full back then location 2,3,4 should have full back disabled only

3) location one: full chest then location 2, 3, 4 should have full chest, front left and front right
    location two: full back then location 3,4 should have full chest, full back, front left and front right, location 2 should have front left, front right and full chest. and location one will only full back disabled

Thanks again.
0
niceoneishereAuthor Commented:
Hi Julian,

Thanks for everything. The solution you gave me works great in the original situation as I have posted but after testing it many times, I am looking to change the way I am showing the location boxes, instead of showing all of them at once, I am showing one as default and others by help of a button called add location.

Thanks and appreciate it :)
0
Julian HansenCommented:
You are most welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.