Element does not display text when condition met

Question

I am relatively new to JavaScript and I am stuck on this last little bit.

I have a set of three drop-downs. The first one is displayed automatically, the 2nd have you select an option in the first. Once you select an option in the 2nd, a 3rd and final drop-down is displayed. A selection here displays a total price and an 'add to cart' button.

The hiccup is... if the user decides to change their selection in the first drop-down, I remove the third, price, and add to cart. However, once I re-select an item in the 2nd drop-down, I can no longer get the third to display.

I have attached my code below, and I believe after stepping through in DevTools, the problem lies here:

document.getElementById("show_SizeSelections").style.display = 'block';

I have tried various methods, but I cannot get the show_sizeSelections to display anything.

Thanks

 $(document).ready(function() { var $style = $('select[name=style]'), $finish = $('select[name=finish]'), $size = $('select[name=size]'); $style.change(function() { var $this = $(this).find(':selected'), rel = $this.attr('rel'), $set = $finish.find('option.' + rel); if ($set.size() < 0) { $finish.hide(); return; } $finish.show().find('option').hide(); $set.show().first().prop('selected', true); }); $finish.change(function() { var $this = $(this).find(':selected'), rel = $this.attr('rel'), $set = $size.find('option.' + rel); if ($set.size() < 0) { $size.hide(); return; } $size.show().find('option').hide(); $set.show().first().prop('selected', true); }); }); var print_Name = 'Test Image', Luster = 'Luster', Metallic = 'Metallic', print_Style, abbrv_Finish, print_Size, print_Price, _toCart, finish_Counter = 0, size_Counter = 0; //stores Print Style selection function showStyle(element) { print_Style = element.options[element.selectedIndex].text; if (finish_Counter > 0) { document.getElementById('show_Size').innerHTML = ''; document.getElementById('print_Cost').innerHTML = ''; document.getElementById('cart_Button').innerHTML = ''; document.getElementById('show_SizeSelections').innerHTML = ''; } else { document.getElementById("show_Finish").innerHTML = '<h4>2. Select a Finish</h4>'; } finish_Counter++; } //stores Print Finish selection function showFinish(element) { var finish_Style = element.options[element.selectedIndex].text; if (finish_Style == Luster) { abbrv_Finish = 'L'; } else if (finish_Style == Metallic) { abbrv_Finish = 'M'; } if (size_Counter > 0) { document.getElementById('print_Cost').innerHTML = ''; document.getElementById('cart_Button').innerHTML = ''; document.getElementById("show_Size").innerHTML = '<h4>3. Select a Size</h4>'; document.getElementById("show_SizeSelections").style.display = 'block'; } else { document.getElementById("show_Size").innerHTML = '<h4>3. Select a Size</h4>'; } size_Counter++; } //stores Print Size and Price selection function showSize(element) { var szpr_Selection = element.options[element.selectedIndex].text; var szpr_Split = szpr_Selection.split(" "); print_Size = szpr_Split[0]; print_Price = szpr_Split[1].replace('$', ''); //if Price exists, display it and Add2Cart var image = document.getElementById("button"); if (print_Price != undefined) { document.getElementById("print_Cost").innerHTML = '<h4>' + '&nbsp;Total: $' + print_Price + '</h4>'; //add items for onClick event _toCart = print_Name + '_' + print_Style + '_' + abbrv_Finish + '_' + print_Size + '_' + print_Price; document.getElementById('cart_Button').innerHTML = "<div class='show-image thumbnail'><a style='text-decoration:none;' onclick='alert(" + _toCart + ")'>Add To Cart</a></div>"; //image.style.display = 'block'; } } 

 .finish { display: none; } .size { display: none; } .button { display: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <h4>1. Select a Style</h4> <br /> <div class="selected_Dropdowns"> <select name="style" onChange="showStyle(this);"> <option value="0">- Select a Style -</option> <option value="0" rel="print">Print</option> <option value="0" rel="matted_print">Matted Print</option> <option value="0" rel="canvas">Canvas</option> <option value="0" rel="framed_plaque">Framed Plaque</option> </select> <br /> <div id="show_Finish"></div> <select name="finish" class="finish" onchange="showFinish(this);"> <option value="1" class="print">- Select a Finish -</option> <option value="1" rel="p_l_size" class="print">Luster</option> <option value="1" rel="p_m_size" class="print">Metallic</option> <option value="1" class="matted_print">- Select a Finish -</option> <option value="1" rel="mp_l_size" class="matted_print">Luster</option> <option value="1" rel="mp_m_size" class="matted_print">Metallic</option> <option value="1" class="canvas">- Select a Finish -</option> <option value="1" rel="cvs_l_size" class="canvas">Luster</option> <option value="1" rel="cvs_m_size" class="canvas">Metallic</option> <option value="1" class="framed_plaque">- Select a Finish -</option> <option value="1" rel="fp_m_size" class="framed_plaque">Metallic</option> </select> <br /><br /> <div id="show_Size"></div> <div id="show_SizeSelections"> <select name="size" class="size" onchange="showSize(this);"> <option value="2" class="p_l_size">- Select a Size -</option> <option value="2" class="p_l_size">8x12 $60</option> <option value="2" class="p_l_size">12x18 $90</option> <option value="2" class="p_l_size">16x24 $120</option> <option value="2" class="p_l_size">20x30 $150</option> <option value="2" class="p_l_size">24x36 $180</option> <option value="2" class="p_m_size">- Select a Size -</option> <option value="2" class="p_m_size">8x12 $70</option> <option value="2" class="p_m_size">12x18 $105</option> <option value="2" class="p_m_size">16x24 $140</option> <option value="2" class="p_m_size">20x30 $180</option> <option value="2" class="p_m_size">24x36 $220</option> <option value="2" class="mp_l_size">- Select a Size -</option> <option value="2" class="mp_l_size">8x12 $85</option> <option value="2" class="mp_l_size">12x18 $135</option> <option value="2" class="mp_l_size">16x24 $175</option> <option value="2" class="mp_l_size">20x30 $225</option> <option value="2" class="mp_l_size">24x36 $275</option> <option value="2" class="mp_m_size">- Select a Size -</option> <option value="2" class="mp_m_size">8x12 $95</option> <option value="2" class="mp_m_size">12x18 $150</option> <option value="2" class="mp_m_size">16x24 $195</option> <option value="2" class="mp_m_size">20x30 $255</option> <option value="2" class="mp_m_size">24x36 $315</option> <option value="2" class="cvs_l_size">- Select a Size -</option> <option value="2" class="cvs_l_size">8x12 $100</option> <option value="2" class="cvs_l_size">12x18 $150</option> <option value="2" class="cvs_l_size">16x24 $250</option> <option value="2" class="cvs_l_size">20x30 $375</option> <option value="2" class="cvs_l_size">24x36 $500</option> <option value="2" class="cvs_m_size">- Select a Size -</option> <option value="2" class="cvs_m_size">8x12 $125</option> <option value="2" class="cvs_m_size">12x18 $180</option> <option value="2" class="cvs_m_size">16x24 $280</option> <option value="2" class="cvs_m_size">20x30 $425</option> <option value="2" class="cvs_m_size">24x36 $550</option> <option value="2" class="fp_m_size">- Select a Size -</option> <option value="2" class="fp_m_size">12x18 $425</option> <option value="2" class="fp_m_size">16x24 $525</option> <option value="2" class="fp_m_size">20x30 $650</option> <option value="2" class="fp_m_size">24x36 $800</option> </select> </div> </div> <br /><br /> <div id="print_Cost"></div> <div id="cart_Button"></div> <br /><br /><br /> <button id="button" class="button" onClick="_add2Cart()">Add to Cart</button> 

Answer 1

<div id="show_SizeSelections">
  <select name="size" class="size" onchange="showSize(this);">

You're setting style.display for the above div.

document.getElementById("show_SizeSelections").style.display = 'block';

But what you hid earlier was the select element inside it.

if ($set.size() < 0) {
  $size.hide();

You could use

document.getElementById("show_SizeSelections").children[0].style.display = 'block';

...or even just $size[0].style.display = 'block'; since you already defined that collection.