jquery - 在 SELECT 更改时隐藏/显示 DIV

Question

我正在尝试根据值显示/隐藏更改的div元素。select为此，我这样做：

$("#form_pdetail").on("click", "#prod_detail_create_field_type", function() {
    if ($(this).val() == 1 || $(this).val() == 2 || $(this).val() == 3) {
        $("#values").removeAttr("display");
    } else {
        $("#values").attr("style", "display: none");
    }
});

但它不工作，因为div#values从来没有出现过。我做错了什么？我应该toggle()改用吗？

Answer 1

使用css而不是attr功能：

$("#values").css({'display': 'block'});或$("#values").css({'display': 'none'});。

作为快捷方式，您可以使用.hide()和.show()

Answer 2

利用toggle()

http://api.jquery.com/toggle/#toggle-showOrHide

var val = parseInt($(this).val());
$("#values").toggle(val == 1 || val == 2 || val == 3);

---

如果prod_detail_create_field_type是一个select元素，你会想要使用change，而不是click。

ifprod_detail_create_field_type实际上是您想要将事件绑定到name的元素radio input[name='prod_detail_create_field_type']

Answer 3

而不是$(this)，尝试使用$("#theIdOfYourSelectBox")

此外，不要使用attrand ，而是removeAttr简单地使用showand hide-$("#values").show()例如。

最后，您应该比较的值可能需要"1"用"2"引号括起来（除非您将 val() 解析为 int）。