Элемент не отображает текст при выполнении условия - PullRequest
Новая
       37

Элемент не отображает текст при выполнении условия

0 голосов
/ 05 февраля 2019

Я относительно новичок в 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>

1 Ответ

0 голосов
/ 05 февраля 2019 
<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';, поскольку вы уже определили эту коллекцию.

...