javascript - 使用 Jquery 根据输入显示和隐藏元素

Question

我一直在尝试创建一个根据用户输入而变化的表单。到目前为止，我已经成功地使用 radio 输入来更改要显示的内容，但是我在编辑 JS 以使用下拉菜单时遇到了问题。

HTML

<div class="show-and-hide-content">
    <select>
        <option></option>
        <option data-type="true">true</option>
        <option data-type="false">false</option>
    </select>
    <div class="hidden content content-true">You have selected true.</div>
    <div class="hidden content content-false">You have selected false.</div>
</div>

CSS

.hidden {
    display:none;
}

Javascript

$(function () {
    $('.show-and-hide-content').each(function (i) {
        var $row = $(this);
        var $selects = $row.find('select');
        $selects.on('change', function () {
            var type = $(this).attr('data-type');
            $row
                .find('.content').hide()
                .filter('.content-' + type)
                    .show();
        });
    });
});

Working radio button JSFiddle

Non working drop down JSFiddle

我知道 JQuery 正在寻找正确的元素并改变它们的显示，但它从不改变显示以使其可见。我认为问题可能是 JS 没有从选项中正确获取数据类型变量。

我希望 JQuery 按预期工作并根据用户选择显示正确的 div。

我怎样才能修改代码来做到这一点？感谢您的帮助。

Answer 1

你现在得到了:

var type = $(this).attr('data-type');

由于函数是在 <select> 上调用的, 您选择 data-type <select> 的属性(已定义)，而不是来自 <option> .

因此，您需要找到所选的 <option> :

var type = $(this).find('option:selected').attr('data-type');

检查 updated Fiddle .

[编辑]

如果你想简化你的代码，你可以使用这个:

$(function () {
    $('.show-and-hide-content select').on('change', function() {
        $(this).parent().
            find('.content').hide()
            .filter('.content-' + $(this).find('option:selected').attr('data-type') ).show();
    });
});

Demo .