1

誰かが選択要素で特定の「オプション」を選択したときの自動非表示/表示機能を作成しようとしています。「セレクター」について私が持っているものは次のとおりです。

<li id="foli16" class="name notranslate">
                    <label class="desc" id="title16" for="Field16">
                        Repeat Pattern
                        <span id="req_16" class="req"></span>
                    </label>
                    <span class="left">
                        <select id="Field16" style="margin-left: 0px;" name="" class="field select">
                            <option value="" <?php echo $doc_selected; ?>>None</option>
                            <option value="" <?php echo $doc_selected; ?>>Daily</option>
                            <option value="" <?php echo $doc_selected; ?>>Weekly</option>
                            <option value="" <?php echo $doc_selected; ?>>Monthly</option>
                            <option value="" <?php echo $doc_selected; ?>>Yearly</option>
                        </select>
                    </span>
                    <p class="instruct" id="instruct16"><small>How often does this test occur?</small></p>
                </li>

誰かが「毎日」オプションを選択すると、「毎日」の id を持つ div が表示されます。別のものを選択した場合は、表示されているものを閉じて、新しい選択を表示する必要があります。

以前にクリック ボタンと 1 つのトグルを使用してこれを行ったことがありますが、特に選択「オプション」を使用して、このような大きなトグルに対してこれを記述する方法がわかりません。私のオプションにもIDが必要になると思います。

4

6 に答える 6

2

5 つのオプション要素があります。選択したオプションに応じて非表示/表示する必要がある 5 つのターゲット要素がある場合は、ターゲット要素にクラスを追加し、eqメソッドindexを使用できます。

var $targets = $('.theTargets');

$('#Field16').change(function(){
    var i = $('option:selected', this).index();
    $targets.hide().eq(i).show();
});

ID でターゲット要素を選択する場合:

$(function(){
    var $targets = $('.theTargets'); // If they have a common class name

    $('#Field16').change(function(){
        var id = this.value.toLowerCase();
        $targets.hide().filter('#' + id).show();
    })
})
于 2013-03-07T21:23:08.563 に答える
0

選択フィールドの変更機能を使用して、選択したオプションの ID を取得できます。

<script>
    $(document).ready(function() {

        //This will fire when an option is selected from <select>
        $("#Field16").change(function() {
            //Add a class to all div's so you can hide previous ones
            $(".whateveryourclassis").hide();

            //Get the ID of the selected option
            var selectedID = $(this).attr("id") + "div";

            //Show the right div. (assuming the div you want has the same ID as option
            //with "div" after it
            $("#" + selectedID).show();
        }

    }
</script>
于 2013-03-07T21:18:19.270 に答える
0

timeJVの答えから構築すると、

showhide非表示/表示される各divに、などのクラス名を付けます。

$("#Field16").change(function() {
    //Get the ID of the desired div
    var selectedID = $(this).val();

    $(".showhide").hide();
    $("#" + selectedID).show();
}
于 2013-03-07T21:25:46.683 に答える
0

次のようなことができます。

$('select').on('change', function () {
    $('li').hide()
    $('#' + this.value).show();
});
于 2013-03-07T21:21:17.430 に答える
0

このようなものを試すことができます。

select を onchange イベントにバインドして、次のように値を取得できます。

$('#Field16').bind('change',function(){
    $('.box').hide(); // All the elements you want to hide on change.
    $('#'+$(this).val()).show();
});

http://jsfiddle.net/XKLx8/

于 2013-03-07T21:26:36.793 に答える
0

まさにあなたが望むもの：

HTML

<select id="Field16" style="margin-left: 0px;" name="" class="field select">
                            <option value="">None</option>
                            <option value="">Daily</option>
                            <option value="">Weekly</option>
                            <option value="">Monthly</option>
                            <option value="">Yearly</option>
                        </select>
<div id="none">I am None</div>
<div id="daily">I am Daily</div>
<div id="monthly">I am Monthly</div>
<div id="weekly">I am Weekly</div>
<div id="yearly">I am Yearly</div>

jQuery

jQuery(document).ready(function($){
    hide_all();
    function hide_all(){
    $("#Field16 option").each(function(){
        var ids=$(this).text().toLowerCase();
        $('#'+ids).hide();
    });
    }
    $("#Field16").change(function(){
        hide_all();
        var val=$('option:selected',this).text().toLowerCase();
        $('#'+val).show();
    });

});

ここにデモがあります：http://jsfiddle.net/8wKzQ/

于 2013-03-07T22:20:32.783 に答える