javascript - 使用 JQuery 选择 "Option"Div 隐藏/显示

Question

我正在尝试创建一个自动隐藏/显示功能，当有人在选择元素上选择某个“选项”时。这是我对“选择器”的看法:

<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>

当有人选择“daily”选项时，我希望显示 id 为“daily”的 div。如果他们选择了不同的，它需要关闭可见的并显示新的选择。

我以前用点击按钮和单个切换按钮完成过此操作，但我不确定如何为如此大的切换按钮编写此代码，尤其是使用选择“选项”时。我假设我的选项也需要 ID。

Answer 1

您有 5 个选项元素，如果您有 5 个目标元素应根据所选选项隐藏/显示，您可以向目标元素添加一个类并使用 eq 和 索引方法:

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();
    })
})