满足条件时元素不显示文本答案

【问题标题】：Element does not display text when condition met满足条件时元素不显示文本
【发布时间】：2019-02-05 15:20:55
【问题描述】：

我对 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>

【问题讨论】：

标签： javascript dropdown onchange display

【解决方案1】：

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

您正在为上述 div 设置 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';，因为您已经定义了该集合。

【讨论】：

您对子节点的第一个建议间接帮助了！我计算了 show_SizeSelections 下有多少孩子并返回了 0。我弄清楚了问题所在，在 showStyle 下我有 document.getElementById('show_SizeSelections').innerHTML = ' '; 它应该是 document.getElementById('show_SizeSelections').innerHTML = 'none'; 然后document.getElementById('show_SizeSelections').innerHTML = 'block'; 再次显示下拉菜单进入那个条件。谢谢！