Javascript 通过单选按钮激活的引导数据切换下拉列表

我试图通过点击一个单选按钮打开一个引导下拉列表，但听起来很简单，这让我度过了痛苦的一天

根据Bootstrap，您可以使用超链接或按钮打开下拉列表，其中包含

data toggle=“dropdown”

。您也可以使用

$（'.dropdown toggle'）.dropdown（）

，但触发器仍必须具有

data toggle=“dropdown”

才能工作

问题是，单选按钮不允许

data toggle=“dropdown”

，如果我将单选选项包装在其自己的超链接标记中并添加切换，则下拉菜单可以工作，但单选按钮本身不能工作，我需要两者同时工作。单选按钮将执行一个操作，同时显示一个下拉列表，以允许进行辅助操作

我简化了代码，给出了一个更简单的示例，并复制了我的问题。您可以在代码笔中看到，下拉菜单起作用，但单选按钮不显示“Hello”。如果删除

你好，个人
你好，生意
你好，罪犯
$（文档）.ready（函数（）{
$（'#busDemo'）.hide（）；
$（'#offDemo'）.hide（）；
$（'#individualForm'）。更改（函数（）{
如果（选中此项）{
$（'#indDemo'）.show（）；
$（'#busDemo'）.hide（）；
$（'#offDemo'）.hide（）；
}
});
$（'#businessForm'）。更改（函数（）{
如果（选中此项）{
$（'#busDemo'）.show（）；
$（'#indDemo'）.hide（）；
$（'#offDemo'）.hide（）；
}
});
$（'#offerform'）。更改（函数（）{
如果（选中此项）{
$（'#offDemo'）.show（）；
$（'#indDemo'）.hide（）；
$（'#busDemo'）.hide（）；
}
});
});

看到密码笔了吗

---

谢谢

从锚内取出单选按钮，因为锚正在包围单选按钮，因此不会触发单选按钮更改事件。修改单选按钮更改处理程序，如下所示：

$('#offenderForm').change(function () {
        if (this.checked) {
            $('#offDemo').show();
            $('#indDemo').hide();
            $('#busDemo').hide();
            $(this).siblings('a.dropdown-toggle').click();
        }
    });

编辑：将其添加到javascript代码中：

$('a.dropdown-toggle').click(function(){
       $(this).siblings('input').click();
   });

这样，当您单击锚定时，将触发单选按钮上的单击事件。同样，当您单击单选按钮时，将触发锚上的单击事件

函数HIDEALBUT（id）{
$（'#indDemo'）.hide（）；
$（'#busDemo'）.hide（）；
$（'#offDemo'）.hide（）；
$（'.dropdown menu'）.hide（）
if（id）$（'#'+id）.show（）；
}
$（'#individualForm'）.change（function（）{
Hidealbut（“indDemo”）；
});
$（'#businessForm'）.change（function（）{
Hidealbut（“busDemo”）；
});
$（“#执行”）。单击（函数（）{
Hidealbut（“offDemo”）；
$（'.dropdown menu'）.dropdown（）.show（）；
});
$（'.下拉菜单a'）。单击（函数（）{
$（'#offDemoSub'）.html（this.innerHTML）；
$（'.dropdown menu'）.dropdown（）.hide（）；
});
Hidealbut（“indDemo”）
。下拉菜单{
左：150px！重要；
顶部：60px！重要；
}
#offDemoSub{左填充：20px}

个人
生意
罪犯





你好，个人
你好，生意
你好，罪犯
如果输入字段位于锚内，则输入字段将永远不会收到更改事件。但您可以将事件委托给父div，并测试您正在单击的锚是否包含您正在查找的输入元素：


$（文档）.ready（函数（）{
$（'#busDemo'）.hide（）；
$（'#offDemo'）.hide（）；
$（'#individualForm'）。更改（函数（）{
如果（选中此项）{
$（'#indDemo'）.show（）；
$（'#busDemo'）.hide（）；
$（'#offDemo'）.hide（）；
}
});
$（'#businessForm'）。更改（函数（）{
如果（选中此项）{
$（'#busDemo'）.show（）；
$（'#indDemo'）.hide（）；
$（'#offDemo'）.hide（）；
}
});
//以不同的方式委派事件
$（'div.radio-group.inline radio'）。在（'click'，'a'，函数（e）上{
var offerform=document.getElementById（'offerform'）；
如果（本文件包含（执行））{
offerform.checked=！offerform.checked；
如果（执行检查）{
$（'#offDemo'）.show（）；
$（'#indDemo'）.hide（）；
$（'#busDemo'）.hide（）；
}
}
});
});
。下拉菜单{
左：200px；
顶部：60px；
}

个人
生意




你好，个人
你好，生意
你好，罪犯
向调用$（'.dropdown toggle'）的收音机添加更改或单击处理程序可能是一种解决方案。dropdown（）函数尝试了这一点。没有雪茄。收音机输入类型中不允许存在数据切换下拉列表的依赖项。如果将收音机包装在一个div中并将数据切换添加到该容器中会怎么样？数据切换与超链接和/或按钮一起工作-根据
$('a.dropdown-toggle').click(function(){
       $(this).siblings('input').click();
   });