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

尝试类似：

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

Answer 3

如果您的第一个选择标记有一个提供说明的选项，例如“选择一个值”，你可以这样做。

.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 4

我认为你应该把一个新的CSS作为show class

.show{
display:block}

现在将代码更改为

// 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" );
} );

jquery，如果select框没有值，则添加class

4 个答案: