取消隐藏时如何以正确的宽度显示隐藏的选择？

Posted 2023-03-17

【中文标题】取消隐藏时如何以正确的宽度显示隐藏的选择？

【英文标题】：How can I make a hidden select display with the right width when unhidden?

【发布时间】：2020-08-16 07:02:30

【问题描述】：

在我的表单中，用户在表示文本或数值的数据之间进行选择。当他们选择数值时，我希望在它旁边出现一个单位选择。该功能一切正常，但是，根据单元选择范围是否开始隐藏，我会得到不同的显示。如果单位选择开始可见（不需要），则单位选择字段将具有正长度。但是，如果它一开始是隐藏的（通过启用下面注释掉的行），则单位选择将显示为无宽度的皱缩选择。无论如何，周围网格字段中的内容都会正确显示。

请注意，在开发此功能时，我还没有为选择字段填充任何选项，尽管我允许用户添加他们自己的条目。无论内容如何，​​我都希望该字段保持相同的大小，以便在视觉上与其他行匹配。

var unitSpan = $('<span>')
                    .attr('id', "unit_selection_" + transactionNum)
                    .attr('style', "grid-column-start:8; grid-column-end:10")
            //      .attr('hidden','hidden')
                    .appendTo(linkSet);
$('<span>')
    .text("units: ")
    .appendTo(unitSpan);

var unitSelect = $('<Select>')
    .attr('class', "chosen-select-single-select chosen-units")
    .attr('id', "newRelationshipRecipientUnits" + transactionNum)
    .attr('name', "newRelationship_" + transactionNum + "_unit")
    .attr('style', "width: 150px;grid-column-start:8;grid-column-end:10")
    .appendTo(unitSpan);

【问题讨论】：

自从提出这个问题后，我有了一个可以尝试的想法，如果不是测试它的技能的话。如果我创建了没有隐藏属性的元素，然后立即调用代码隐藏元素怎么办？我一直在尝试将 'on' 和 'ready' 事件添加到 unit_selection_x 跨度以产生这种行为，但不知道我是否正确使用它们，即使它们是正确的选择。

【参考方案1】：

使用可见性样式而不是隐藏样式，单位跨度仍会占用布局中的空间，因此您无需使用宽度。

var unitSpan = $('<span>')
                .attr('id', "unit_selection_" + transactionNum)
                .attr('style', "grid-column-start:8; grid-column-end:10")
                .css('visibility':'hidden')
                .appendTo(linkSet);

然后使用

unitSpan.css('visibility','')

使元素可见。

此外，如果您使用 jQuery css() 方法，您不会破坏您的样式值。因此，您似乎在重复“grid-column-start:8; grid-column-end:10”。

var unitSpan = $('<span>')
            .attr('id', "unit_selection_" + transactionNum)
            .css("grid-column-start" :"8", "grid-column-end":"10", "visibility":"hidden")
            .appendTo(linkSet);

然后使用其中任何一个来显示它，而不是重置可能导致其他问题的整个样式。

unitSpan.css('visibility','');

unitSpan.show();