javascript - jquery从多个选择中添加/删除多个输入（下拉菜单）

Question

我在一个表格中有很多选择。

我想在表单中添加几个选项“其他”。When "Other" is selected it shows a hidden input.

$(document).ready(function(){

$(".SelectOther").append('<option value=-1>Other</option>');
$(".OtherDiv").hide();
    $(".SelectOther").change(function()
    {
        if($(".SelectOther option:selected").text() == "Other")
        {
            $(".OtherDiv").show("slide", { direction: "up" }, 1000);
        }
        else
        {
            $(".OtherDiv").hide("slide", { direction: "down" }, 1000);
        }
    });

});

尚未测试此代码，但这会打开所有隐藏的“OtherDiv”

所有选择都在表中的 TD 内。

如何确保选择“其他”时仅显示该 TD 中的隐藏输入？

Answer 1

解决方案 ：

使用$(this). 通过这种方式，您将知道您处于正确的上下文中。

$(document).ready(function(){

   $(".SelectOther").append('<option value=-1>Other</option>');
   $(".OtherDiv").hide();
   $(".SelectOther").change(function() {
     var otherDiv =  $(this).closest("tr").find(".OtherDiv"); // find the .otherdiv within the tr
     if($(this).find("option:selected").text() == "Other") //find the selected option
     {
           otherDiv.show("slide", { direction: "up" }, 1000);
     }
     else
     {
           otherDiv.hide("slide", { direction: "down" }, 1000);
     }
    });

});

编辑：

要添加或删除类，您可以使用toggleClass("classname"), 或addClass("classname")/ removeClass("classname")。

有关此处使用的东西的更多信息：

$(this)

• 文档：http ://learn.jquery.com/javascript-101/this-keyword/
• 它的作用：返回当前上下文。

find()

• 文档：http ://api.jquery.com/find/
• 它的作用：获取当前匹配元素集中每个元素的后代，由选择器、jQuery 对象或元素过滤。