Question

我正在尝试进行div显示，直到select选项发生变化，此时div只会在我将select更改为选项2，然后再返回选项1时显示。这是我的代码片段

<select id="selectchange" name="id">
    <option class="1">Show by default</option>
    <option class="2">Hidden</option>
</select>

和

$("#selectchange").change(function () {
    var selectBox = $("#selectchange");
    var selected = $("#selectchange option:selected");

    if( selected.attr("class") == '1' )
    {
        var optionPrice = $('option:selected', this).attr('data-price');
        var optionPriceSale = $('option:selected', this).attr('data-price-sale');
        $('.showthistext').show();
        $('[itemprop="price"] .money').text( optionPrice );
            {% if variant.compare_at_price > variant.price %} 
        $('.was_price .money').text( optionPriceSale ); 
            {% endif %}
    }
    else if ( selected.attr("class") == '2' )
    {
        var optionPrice = $('option:selected', this).attr('data-price');
        var optionPriceSale = $('option:selected', this).attr('data-price-sale');

        $('.showthistext').hide();
        $('[itemprop="price"] .money').text( optionPrice );
            {% if variant.compare_at_price > variant.price %} $('.was_price .money').text( optionPriceSale );
            {% endif %}
    }
    else {
        console.log('Invalid Option');
    }  
});

Answer 1

也许这就是你要找的东西示例代码如下：

$("#selectchange").on("change",function(){
    var optClass    = $("option:selected", this).attr("class");
    var showthis    = $(".showthistext");

    if(optClass == 1){
        showthis.show();
    }else{
        showthis.hide();
    }
});

Jsfiddle：https://jsfiddle.net/synz/18v1h6gu/

Answer 2

只需创建一个名为hidden的类，并为其指定opacity = 0和visibility = false。

然后使用jquery根据选项选择来分配和删除类....

.hidden{
    Opacity:0;
    Visibility:false;
}

$('div').addClass('.hidden');

$('div').removeClass('.hidden');

很抱歉，如果我手机上的格式有点奇怪。

选择选项更改时隐藏div

2 个答案: