当条件满足元素不显示文本

Question

我是比较新的JavaScript和我卡在这最后的一点。

我有一组三个下拉菜单。第一种是自动显示，第二你有选择的第一个选项。一旦您选择了第二个选项，将显示第三和最后的下拉。这里的选择显示总价和“添加到购物车”按钮。

打嗝是......如果用户决定改变自己的第一个下拉选择，我删除了第三，价格，并添加到购物车。但是，一旦我重新选择的第二个下拉一个项目，我可以不再获得第三显示。

我在下面附上我的代码，我相信在DevTools步进通过后，问题就出在这里：

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

我已经尝试了各种方法，但我不能让show_sizeSelections显示任何内容。

谢谢

$(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);">

你设置为style.display上述股利。

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

但是你刚才藏在里面吧select元素。

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

你可以使用

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

......甚至只是$size[0].style.display = 'block';既然你已经决定了这个集合。