troubleshooting Question

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

Avatar of niceoneishere
niceoneishere asked on
jQueryHTMLJavaScript
11 Comments1 Solution355 ViewsLast Modified:
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>

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');
        }
    });


});
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 11 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 11 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros