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

我用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;
}

Answer 2

出于可用性原因，我已经冒昧地纠正了你的标记，以及用<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>

可以使用CSS或JS隐藏.admin无线电输入及其随附的<label>。

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

或

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

我选择在.change()元素上收听<select>事件，并检查所选选项的值以查看它是否与“管理”匹配：

$(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/

选择部门时，选择向下滑动选项

2 个答案: