選擇部件時選擇向下滑動

Question

我嘗試過研究它，但我無法找到適合我需要的東西，對於JQuery我相當新。我需要： 我用css隱藏了單選按鈕和文本。由於用途選擇一個部門，我只想要單選按鈕中的那些項目顯示。但我需要它來響應用戶的變化。有什麼建議麼？

<p> 
     Sub-Department: 
    <select id="subdep"> 
     <option>Please Select Sub-Department</option>--> 
     <option value="Administration">Administration</option> 
      <option value="inventory">Inventory Control</option> 
     </select></p> 
      </div><!--End of Sub-Department--> 

<div id=taskcon> 
<input type="radio" class="admin" value="Appt Exception"/>Appt Exception 
<input type="radio" class="admin" value="Appt Reschedule"/>Appt Reschedule 
<input type="radio" class="inventory" value="Inventory Review"/>Inventory Review 

<script> 
$(document).ready(function(){ 
var requestlist = document.getElementById("subdep"); 
var list = requestlist.options[requestlist.selectedIndex].value; 

if(list == "Administration"){ 

    $('.admin').slideDown('slow'); 
} 

}); 

</script> 

Answer 1

我已冒昧地糾正你的標記一點，以及包裝的文字後與<label>元素每個單選按鈕，可用性方面的原因：

<div id="taskcon"> 
    <input type="radio" id="r1" class="admin" value="Appt Exception" /><label for="r1">Appt Exception</label> 
    <input type="radio" id="r2" class="admin" value="Appt Reschedule" /><label for="r2">Appt Reschedule</label> 
    <input type="radio" id="r3" class="inventory" value="Inventory Review" /><label for="r3">Inventory Review</label> 
</div> 

的.admin無線電輸入和他們的隨行<label> S可通過使用CSS或JS：

.admin, 
.admin + label { 
    display: none; 
} 

或

$(".admin, .admin+label").hide(); 

隱藏

---

我選擇聽<select>元素的.change()事件，並檢查所選選項的值，看它是否符合「管理」：

$(function() { 
    $("#subdep").change(function() { 
     if($(this).find("option:selected").val() == "Administration") { 
      $(".admin, .admin+label").show(); 
     } else { 
      $(".admin, .admin+label").hide(); 
     } 
    }); 
}); 

這裏的小提琴：http://jsfiddle.net/teddyrised/f2MqE/

Answer 2

我已經隱藏了單選按鈕和文本的CSS。

確保您在「隱藏」他們您在使用display: none;做CSS因爲jQuery不會改變visibility: hidden;到visibility: visible;。

And here's some code for you：

JS：

$(document).ready(function() { 
    $('#subdep').change(function() { 
     if ($(this).val() == "Administration") { 
      $('#taskcon :not(.admin)').hide(); 
      $('#taskcon .admin').show(); 
     } else if ($(this).val() == "inventory") { 
      $('#taskcon :not(.inventory)').hide(); 
      $('#taskcon .inventory').show(); 
     } else { 
      $('.admin, .inventory').hide(); 
     } 
    }); 
}); 

HTML：

<div> 
    <p>Sub-Department: 
     <select id="subdep"> 
      <option>Please Select Sub-Department</option>--> 
      <option value="Administration">Administration</option> 
      <option value="inventory">Inventory Control</option> 
     </select> 
    </p> 
</div> 
<!--End of Sub-Department--> 
<div id=taskcon> 
    <input type="radio" class="admin" value="Appt Exception" id="aptex" /> 
    <label for="aptex" class="admin">Appt Exception</label> 
    <input type="radio" class="admin" value="Appt Reschedule" id "aptrs" /> 
    <label class="admin" for="aptrs">Appt Reschedule</label> 
    <input type="radio" class="inventory" value="Inventory Review" id="inv" /> 
    <label class="inventory" for="inv">Inventory Review</label> 
</div> 

CSS：

.admin, .inventory { 
    display: none; 
}