在隐藏的联系表单上使用 jqTransform，选择框值不显示

Posted 2023-05-09

【中文标题】在隐藏的联系表单上使用 jqTransform，选择框值不显示

【英文标题】：Using jqTransform on hidden contact form, select box value not showing

【发布时间】：2011-12-01 03:53:45

【问题描述】：

对不起，如果这很痛苦，但我真的可以在这里使用一些帮助：

http://dev.rjlacount.com/treinaAronson-form/

点击左上角的“联系方式”按钮可以看到联系方式。我正在使用 jqTransform jQuery 插件来设置它的样式。它最初是隐藏的 display:none;应用于 ID 为“panel”的 div，并使用以下内容滑入：

$("#flip").click(function(e)
    e.preventDefault();
    $("#panel").slideToggle("3000");
);

使用此设置，联系表单不会在其字段内显示选择框的当前值。如果我改为删除 display:none;来自我的 CSS 的面板 div 规则，并在页面加载后隐藏表单：

$("#panel").hide();

表格显示正确。如果我在页面加载后用 jQuery 将其隐藏，是否有人知道我如何使这项工作正常工作并避免打开面板的闪烁？

非常感谢您的任何建议。如果我能提供更多信息，请告诉我。

【问题讨论】：

我可以指出在那个网站上他们拼写 Treina 有两种不同的方式吗？

@Mahnax 这实际上是我的错，感谢您指出。它应该拼写为 Treina；你在哪里注意到混淆了？ （编辑：如果你说的是带有社交图标的棕色区域，我刚刚注意到了。现在修复。）

没问题，是棕色区域。

【参考方案1】：

问题是，jqtransform 正在设置标签的宽度（转换后的选择中当前可见的值）以匹配原始选择的宽度。

如果原始选择（或其父项）设置了display:none，并且没有指定任何css宽度，则该元素上.width()的结果为零。

您实际上可以检查（使用 firebug 或 google chrome 开发工具），不是联系表单不显示选择元素的当前值，而是以等于零的宽度显示它。

在您的情况下，最简单的解决方案是（在您的 css 文件中）为作为联系表单一部分的选择设置固定宽度。这样，即使它们一开始会被隐藏，jqtransform 也会为标签设置正确的宽度。例如：

/* css declaration */
#change-form select 
    width: 390px;

旁注：当然还有其他方法可以让它工作，包括调整 jqtransform 脚本以适应您的特定用例。与设置提到的标签宽度相关的部分脚本从第 289 行开始。

【讨论】：

做到了！非常感谢，我对此感到非常沮丧。