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

<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>、CSS または JS を使用して非表示にすることができます。

.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 に答える
1

cssでラジオボタンとテキストを非表示にしました。

display: none;jQueryvisibility: 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 に答える