Question

我正在尝试使用下拉值作为2值yes / no来更改是否显示字段。我仍然希望元素存在，只是没有可见。

我正在使用Razor和MVC3来呈现页面。

所以我尝试了以下代码：

$(function () {
    $("DiscountOn").change(function () {
        if ($("DiscountOn").Value == 0) {
            $("DiscountPercentage").fadeOut('fast');
        }
        else {
            $("DiscountPercentage").fadeIn('fast');
        }
    });
});

DiscountOn是下拉列表，其值分别为0或1，文本号或是。我希望它在DiscountOnage转为0时使DiscountPercentage消失，并在DiscountOn转为1时重新出现。对于增值，如果您可以在页面加载时使其显示或消失，具体取决于在下拉列表中设置的选项会很棒。

Answer 1

$("DiscountOn")

未正确选择元素。如果您要选择的元素的ID，则需要执行以下操作：

document.getElementById("DiscountOn") // Pure JS

或

$("#DiscountOn") // jQuery

你的另一个问题是如何获得价值。你要么需要这样做

.value // Pure JS

或

.val() // jQuery

请记住，JS区分大小写！

Answer 2

$(function () {
    $("#DiscountOn").change(function () {
        if ($(this).val() == '0') {
            $('#DiscountPercentage').fadeOut('fast');
        }
        else {
            $('#DiscountPercentage').fadeIn('fast');
        }
    });
});

对于增值，如果你可以让它出现或消失页面已加载，具体取决于下拉列表中设置的选项那将是非常好的。

理想情况下，这应该在服务器端完成，而不是使用任何JavaScript。您已经知道下拉列表的选定值，因此您可以在DiscountPercentage元素周围动态添加一些CSS类来显示/隐藏它。

Answer 3

问题在于选择器

如果DiscountOn和DiscountPercentage是ID或元素。如果它们是#

的类，则使用.作为前缀

$(function () {
    $("#DiscountOn").change(function () {
        if ($("#DiscountOn").val() === 0) {
            $("#DiscountPercentage").fadeOut('fast');
        }
        else {
            $("#DiscountPercentage").fadeIn('fast');
        }
    });
});

使用选择更改淡出或淡化另一个字段

3 个答案: