jquery - jquery，如果选择框没有值，则添加类

Question

.hide()如果没有值，有没有办法可以隐藏选择框（使用）？

我目前正在这样做；

// Hide second select box by default
$( "#val_sidebar_nav_002" ).addClass( "hidden" );

// Show second select box once first box's value changes
$( "select#val_sidebar_nav_001" ).change( function() {
    $( "#val_sidebar_nav_002" ).removeClass( "hidden" );
} );

但是一旦我保存页面，第二个选择框就会再次消失，所以我需要做的是.addClass( "hidden" );仅在选择框没有价值时添加它。

那有意义吗？

Answer 1

toggleClass至少使用并触发一次change事件：

$( "#val_sidebar_nav_002" ).addClass( "hidden" );

// Show second select box once first box's value changes
$( "select#val_sidebar_nav_001" ).change( function() {
    $( "#val_sidebar_nav_002" ).toggleClass("hidden",!($(this).val()===""));
} ).change();

toggleClass 将根据第一个选择框的值删除或添加类。我没有您的 HTML，因此您可能会更改一件事或 2。您需要触发一次更改事件以应用具有当前值的样式。

Answer 2

如果您的第一个选择标签有一个提供说明的选项，例如“选择一个值”，您可以执行类似的操作。

.hidden { display: none; }

<select id="select1">
    <option value="0">-Select A Value -</select>
    <option value="1">Value 1</select>
    <option value="2">Value 2</select>
    <option value="3">Value 3</select>
</select>

<select id="select2" class="hidden">
    <option value="1">Value 1</select>
    <option value="2">Value 2</select>
    <option value="3">Value 3</select>
</select>

$('#select1').change(function () {
    if ($(this)[0].selectedIndex > 0) {
        $('#select2').removeClass('hidden');
    } else {
        $('#select2').addClass('hidden');    
        $('#select2')[0].selectedIndex = 0; // reset the 2nd select tag.
    }
});

Answer 3

I think you should make one new css as show class

.show{
display:block}

and now change your code to

// Hide second select box by default
$( "#val_sidebar_nav_002" ).removeClass('show').addClass( "hidden" );

// Show second select box once first box's value changes
$( "select#val_sidebar_nav_001" ).change( function() {
    $( "#val_sidebar_nav_002" ).removeClass( "hidden" ).addClass( "show" );
} );

Answer 4

尝试类似：

var $select2 = $( "#val_sidebar_nav_002" );
if(! $select2.val()){
    $select2.addClass("hidden");
}