Avatar of niceoneishere
niceoneishere
 asked on

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

jQueryHTMLJavaScript

Avatar of undefined
Last Comment
Julian Hansen

8/22/2022 - Mon
Leonidas Dosas

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

Julian Hansen

Question: any reason you are using multiple listboxes rather than a single - multi-select listbox?
niceoneishere

ASKER
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
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
ASKER CERTIFIED SOLUTION
Julian Hansen

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
niceoneishere

ASKER
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
Julian Hansen

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.
niceoneishere

ASKER
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.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Julian Hansen

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..
niceoneishere

ASKER
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.
niceoneishere

ASKER
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 :)
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
Julian Hansen

You are most welcome.