1

I have four select boxes and by default I am showing one of them. Under the first one there are 2 links one say add one more location and other says remove one location.

Basically what I am doing is wrapped the select box inside a div tag and when add one more is click I am showing another location and when remove location is clicked hiding the location.

I also have a limit of 4 select boxes so when four are reached it's show a alert and when 3 are removed it show a alert saying min one is required

The problem I am facing is once the page is displayed I can add a location with one click but when click on remove, it does not hide until 2 clicks and from then on if I add one more I have click twice. Thanks

Here is my code

var i = 2;
$(".addonemore").click(function(){
    if( i > 4){
        alert("You can add only a maximum of 4 locations");
    } else {
        $('.location-'+i).css({'display':'table'});
        i++;
    }
});
$(".rmone").click(function(){
    if( i < 2){
        alert("You need at least one location and color");
    } else {
        $('.location-'+i).css({'display':'none'});
        i--;
    }
});
.pc-row {width: 100%; display: table; table-layout: fixed; }.pc-col {display:table-cell;vertical-align:top}
.location-2,.location-3,.location-4{display:none}.quote-sizes select{border:1px solid #ccc;font-size:14px;height:30px;padding:0 5px}
.quote-sizes label {cursor:inherit;display:block;width:100%;overflow:hidden;white-space:nowrap;margin-bottom:10px}.quote-sizes label span{font-size:14px;text-align:right;float:left;margin-right:3px;vertical-align:middle;width:120px}
#add-location,#rm-location{margin:20px 0;width:160px;float:left}#add-location a,#rm-location a{text-decoration:none;color:#000;border:2px solid #990000;font-size:13px;padding:5px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="adult-sizes-box">
 <h2 class="section-title">3. Design Location & Colors</h2>
 <p class="ptext">You can select maximum 4 locations per shirt and Each location can have a maximum 4 colors. The base price includes the First Location and One color</p>
 <div class="pc-row location-1">
 <div class="locations-colors pc-col quote-sizes">
   <h4>Choose location below</h4>
    <label for="location_one"><span>Location</span>
     <select name="location_one" id="location_one" class="linked-drop-down">
         <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>
  
 </div>
 </div>
 <div class="pc-row location-2">
  <div class="locations-colors pc-col quote-sizes">
    <label for="location_two"><span>Location</span>
     <select name="location_two" id="location_two" class="linked-drop-down">
         <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>
  
 </div>
 </div>
  <div class="pc-row location-3">
  <div class="locations-colors pc-col quote-sizes">
    <label for="location_three"><span>Location</span>
     <select name="location_three" id="location_three" class="linked-drop-down">
         <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>
  
 </div>
 </div>
  <div class="pc-row location-4">
  <div class="locations-colors pc-col quote-sizes">
    <label for="locatio_four"><span>Location</span>
     <select name="location_four" id="location_four" class="linked-drop-down">
         <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>
  
 </div>
 </div><br />
  <div class="pc-row">
  <div class="pc-col">
   <div id="add-location"><a href="javascript:void(0);" class="addonemore">Add one more location</a></div>
     <div id="rm-location"><a href="javascript:void(0);" class="rmone">Remove one location</a></div>
  </div>
 </div>
 </div>
Nelson Teixeira
  • 6,297
  • 5
  • 36
  • 73
niceoneishere
  • 343
  • 2
  • 10
  • 25

3 Answers3

1

It's probably because i starts with 2, try initialising it with 1 as only one select is visible initially and increment it before showing the div.

var i = 1;
$(".addonemore").click(function(){
  if( i > 4){
      alert("You can add only a maximum of 4 locations");
  } else {
      i++;
      $('.location-'+i).css({'display':'table'});
  }
});
$(".rmone").click(function(){
  if( i < 2){
      alert("You need at least one location and color");
  } else {
      $('.location-'+i).css({'display':'none'});
      i--;
  }
});
Dan Philip Bejoy
  • 4,321
  • 1
  • 18
  • 33
1

The problem is your add and remove functions need to operate on different elements. By initializing i at 1 as suggested by @DanPhilip and changing the element that the add function acts on, you can get the correct behavior.

Here is a working solution:

var i = 1;
$(".addonemore").click(function(){
 if( i > 3){alert("You can add only a maximum of 4 locations");}else{
  $('.location-'+ ++i).css({'display':'table'});
 }
});
$(".rmone").click(function(){
 if( i < 2){alert("You need at least one location and color");}else{
  $('.location-'+i).css({'display':'none'}).find("option[value='']").attr({'selected':'selected'});
  i--;
 }
});
.pc-row {width: 100%; display: table; table-layout: fixed; }.pc-col {display:table-cell;vertical-align:top}
.location-2,.location-3,.location-4{display:none}.quote-sizes select{border:1px solid #ccc;font-size:14px;height:30px;padding:0 5px}
.quote-sizes label {cursor:inherit;display:block;width:100%;overflow:hidden;white-space:nowrap;margin-bottom:10px}.quote-sizes label span{font-size:14px;text-align:right;float:left;margin-right:3px;vertical-align:middle;width:120px}
#add-location,#rm-location{margin:20px 0;width:160px;float:left}#add-location a,#rm-location a{text-decoration:none;color:#000;border:2px solid #990000;font-size:13px;padding:5px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="adult-sizes-box">
 <h2 class="section-title">3. Design Location & Colors</h2>
 <p class="ptext">You can select maximum 4 locations per shirt and Each location can have a maximum 4 colors. The base price includes the First Location and One color</p>
 <div class="pc-row location-1">
 <div class="locations-colors pc-col quote-sizes">
   <h4>Choose location below</h4>
    <label for="location_one"><span>Location</span>
     <select name="location_one" id="location_one" class="linked-drop-down">
         <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>
  
 </div>
 </div>
 <div class="pc-row location-2">
  <div class="locations-colors pc-col quote-sizes">
    <label for="location_two"><span>Location</span>
     <select name="location_two" id="location_two" class="linked-drop-down">
         <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>
  
 </div>
 </div>
  <div class="pc-row location-3">
  <div class="locations-colors pc-col quote-sizes">
    <label for="location_three"><span>Location</span>
     <select name="location_three" id="location_three" class="linked-drop-down">
         <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>
  
 </div>
 </div>
  <div class="pc-row location-4">
  <div class="locations-colors pc-col quote-sizes">
    <label for="locatio_four"><span>Location</span>
     <select name="location_four" id="location_four" class="linked-drop-down">
         <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>
  
 </div>
 </div><br />
  <div class="pc-row">
  <div class="pc-col">
   <div id="add-location"><a href="javascript:void(0);" class="addonemore">Add one more location</a></div>
     <div id="rm-location"><a href="javascript:void(0);" class="rmone">Remove one location</a></div>
  </div>
 </div>
 </div>

EDIT: The JavaScript was modified to return the select element to its default selection upon being hidden.

freginold
  • 3,946
  • 3
  • 13
  • 28
  • 1
    Thanks and that's what I did as mentioned below at Dan's comment box – niceoneishere Mar 24 '17 at 18:29
  • Hi I am trying to extend this to disable to a selected option each of the location boxes in others. What I mean is If I select an option from location one that should be disabled in other 3 locations boxes, and if a location is selected in location 2, then that option should be disabled in other 3 location boxes. I got the code below which does that but when I remove a location, it should enable the disabled option in location one. – niceoneishere Mar 26 '17 at 03:53
  • here is my code `$('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[name*="location"]').prop('id'); var options = $('select[name*="location"]:not(#' + id + ') option[value=' + value + ']'); options.prop('disabled', 'true'); } }); })` Thanks again – niceoneishere Mar 26 '17 at 03:53
  • @niceoneishere Your code works well, you just also need to call it when a box is removed, as well as when input is changed. See [this fiddle](https://jsfiddle.net/freginold/s11wg9s3/1/) with updated working code. – freginold Mar 27 '17 at 16:37
  • Appreciate it. Here is what's happening only in FireFox V52. When I click remove location, It does reset by adding selected to value='' but the text does not get reset. Not sure if this a FireFox bug. It happen even in fiddle. Thanks again – niceoneishere Mar 28 '17 at 19:56
  • @niceoneishere That's weird. I only have access to IE right now so can't see what's going on. Do the dev tools give you any indicator of why it won't reset the text? It may be something to do with how Firefox handles the `onchange` event; see [this answer](http://stackoverflow.com/a/1388965/5463636) for more info. – freginold Mar 28 '17 at 20:26
  • 1
    Got it working I used .prop instead of .attr. Thanks again now working on disabling front left and front right if full chest is selected :) – niceoneishere Mar 28 '17 at 20:37
  • 1
    Here is my https://jsfiddle.net/pepin/bnqanqLn/1/ fiddle and I am able to disable front left, front right too. Thanks again – niceoneishere Mar 28 '17 at 21:03
1

There are 2 problems. First you should be removing element that has index - 1 not the element index. Second the remove limit should be <= 2. Like this:

var i = 2;
$(".addonemore").click(function(){
    if( i > 4){
        alert("You can add only a maximum of 4 locations");
    } else {
        $('.location-'+i).css({'display':'table'});
        i++;
    }
});
$(".rmone").click(function(){
    if( i <= 2){
        alert("You need at least one location and color");
    } else {
        $('.location-'+(i-1)).css({'display':'none'});
        i--;
    }
});
.pc-row {width: 100%; display: table; table-layout: fixed; }.pc-col {display:table-cell;vertical-align:top}
.location-2,.location-3,.location-4{display:none}.quote-sizes select{border:1px solid #ccc;font-size:14px;height:30px;padding:0 5px}
.quote-sizes label {cursor:inherit;display:block;width:100%;overflow:hidden;white-space:nowrap;margin-bottom:10px}.quote-sizes label span{font-size:14px;text-align:right;float:left;margin-right:3px;vertical-align:middle;width:120px}
#add-location,#rm-location{margin:20px 0;width:160px;float:left}#add-location a,#rm-location a{text-decoration:none;color:#000;border:2px solid #990000;font-size:13px;padding:5px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="adult-sizes-box">
<h2 class="section-title">3. Design Location & Colors</h2>
<p class="ptext">You can select maximum 4 locations per shirt and Each location can have a maximum 4 colors. The base price includes the First Location and One color</p>
<div class="pc-row location-1">
<div class="locations-colors pc-col quote-sizes">
  <h4>Choose location below</h4>
   <label for="location_one"><span>Location</span>
    <select name="location_one" id="location_one" class="linked-drop-down">
     <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>
 
</div>
</div>
<div class="pc-row location-2">
 <div class="locations-colors pc-col quote-sizes">
   <label for="location_two"><span>Location</span>
    <select name="location_two" id="location_two" class="linked-drop-down">
     <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>
 
</div>
</div>
 <div class="pc-row location-3">
 <div class="locations-colors pc-col quote-sizes">
   <label for="location_three"><span>Location</span>
    <select name="location_three" id="location_three" class="linked-drop-down">
     <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>
 
</div>
</div>
 <div class="pc-row location-4">
 <div class="locations-colors pc-col quote-sizes">
   <label for="locatio_four"><span>Location</span>
    <select name="location_four" id="location_four" class="linked-drop-down">
     <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>
 
</div>
</div><br />
  <div class="pc-row">
  <div class="pc-col">
   <div id="add-location"><a href="javascript:void(0);" class="addonemore">Add one more location</a></div>
 <div id="rm-location"><a href="javascript:void(0);" class="rmone">Remove one location</a></div>
  </div>
 </div>
</div>

JSFiddle: https://jsfiddle.net/haL32cbd/2/

Nelson Teixeira
  • 6,297
  • 5
  • 36
  • 73