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

Using jqTransform on hidden contact form, select box value not showing

本文关键字：选择 显示 jqTransform 联系人 隐藏 表单      更新时间：2023-09-26

对不起，如果这是一个痛苦的屁股，但我真的可以在这里使用一些帮助:

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

联系人表单可以通过点击左上角的"contact"按钮看到。我使用jqTransform jQuery插件来样式它。它最初是用display:none隐藏的;应用于ID为"panel"的div，并插入以下内容:

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

通过这种设置，联系人表单不会在其字段内显示选择框的当前值。如果我移除display:none;在我的CSS中设置面板div的规则，并在页面加载后隐藏表单:

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

表单显示正确。有人知道我如何使这个工作，并避免一个打开面板的闪烁，如果我隐藏它与jQuery后，页面加载?

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

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

如果原始的select(或它的父元素)设置了display:none，并且它没有指定任何css宽度，则.width()在该元素上的结果为0。

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

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

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

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

相关文章：