Question

我一直在尝试创建一个根据用户条目更改的表单。到目前为止，我已成功使用无线电输入来更改要显示的内容，但我无法编辑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

Answer 2

或者将您的选择data-type更改为value并使用

var type = $(this).val();

DEMO

Answer 3

试试这个

$(function () {
    $('#select').on('change', function () {
        var selctedval  = $(this).val();
        $('.content').hide();
        $('.content-' + selctedval).show();
    });
});

Answer 4

这将使用“data-type”属性中的任何值，并将其与您在消息上的“content-”类相匹配。如果没有匹配的消息，则不会显示任何消息。

$('.show-and-hide-content select').on('change', function(){
    var selected = $(this).find('option:selected').data('type');
    $('.content').addClass('hidden');
    $('.content-' + selected).removeClass('hidden');
});

这是 fiddle

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

HTML

CSS

的Javascript

4 个答案: