jquery - 动态选择插件下拉列表中的 CSS 对齐问题

Question

Example Fiddle

我为多选下拉菜单使用了 Chosen 插件。

在初始页面上，一个 dropdown已添加到 html 中查看这是chosen .

然后，如果我们点击“add mitigator”，就会添加新的下拉菜单。

现在的特征是这样的:

• 每个下拉菜单都有 1 到 14 个选项

• 如果我从下拉列表 1 中选择一个选项(比如说 2)，那么其他两个下拉菜单将从它们的选项菜单中取消选择(禁用)(2)。

问题围绕 div 的 CSS 问题。这是下拉菜单所在的位置。

产生问题:

• 访问 fiddle 链接。

• 单击“add mitigator”链接以添加另外两个下拉菜单。

• 在 dropdown 2 ，一一选择所有选项，您将看到 dropdown2得到扩展并隐藏在dropdown3后面.但它不会发生在 dropdown1 上。 .

我该如何解决这个问题？

Answer 1

尝试使用 CSS

.chosen-container {
  min-height:30px;
  height:auto !important;
}

新添加的多选下拉菜单有一个类名为 .chosen-container 的 div，它通过 JavaScript 将高度 30px 应用到元素样式中。

您需要从您的 css 文件中覆盖该 CSS 属性。

我已经更新了你的 fiddle :https://jsfiddle.net/vrwzckav/4/