1

我尝试研究它，但找不到适合我需要的东西，我对 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>
4

2 回答 2

1

我用 CSS 隐藏了单选按钮和文本。

确保当你在 CSS 中“隐藏”它们时，你会使用它，display: none;因为 jQuery 不会更改visibility: hidden;为visibility: visible;.

这里有一些代码给你：

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;
}
于 2013-10-26T10:08:44.457 回答
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>

可以使用 CSS 或 JS 隐藏无线电.admin输入及其随附的 s。：<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/

于 2013-10-26T10:42:03.790 回答