Link to home
Start Free TrialLog in
Avatar of Tammu
Tammu

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

Avatar of Leonidas Dosas
Leonidas Dosas
Flag of Greece image

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

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

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
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Tammu

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
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.
Avatar of Tammu

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.
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..
Avatar of Tammu

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.
Avatar of Tammu

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 :)
You are most welcome.