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

試着這麼做：

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

Answer 2

使用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 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{ 
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"); 
});