Question

对于MS Dynamics CRM风格的自定义用户控件，我需要一个组合框，它本身不存在于HTML中。

我的想法是将input和select放在一起。问题是我可以

使用select控件的箭头本身，但后来我需要摆脱 select控件的值部分。它至少存在当我通过按下按钮移动鼠标来标记时，即使使用color:transparent或
在顶部放置另一个元素，但是我无法打开下拉列表编程。

控件必须沿着input元素延伸到整个控件的完整大小。

此外，在Internet Explorer中，下拉列表也随当前所选元素一起移动，因此，如果我选择第三个option，则在下次打开时，前两个option s将在上面显示。

由于此自定义控件将显示在iframe中，因此我必须使用select，以便下拉列表部分也会在iframe之外呈现，但不会隔断。这是必需的。

请参阅https://jsfiddle.net/z7tcrtdg/以获得一个大致的想法。

Answer 1

您应该在select元素中使用 size 属性将任何样式应用于您的选项或选择。

您可能会感到惊讶，但默认情况下，MS会实施下拉列表。让我解释一下：你看到输入元素，当你点击它时，js function apply＆＃34; display：none＆＃34;输入并从展开的选择（和其他）中删除此属性。我在这种不受支持的自定义方面有很大的经验。

由于此自定义控件将显示在iframe中，因此我必须使用select，以便下拉部分也将呈现在iframe之外，并且不会被切断。这是必需的。

有两种方法可以实现这一目标： 1.为您的html网络资源设置足够的空间 2.将控件的标记直接添加到标准标记（非常不推荐和不支持）

希望得到这个帮助。

<强> UPD：

如果您没有足够的自定义控件可用空间信息，则只有一种实现方式。这种方式将控件的标记直接放入标准HTML表单标记中。 在选择这种方式作为解决方案之前，理解所有后果非常重要。

所以，我想从控制标记开始。请看下面的代码块：

<tr height="24">
<td class="ms-crm-ReadField-Normal ms-crm-FieldLabel-LeftAlign">
    <span class="ms-crm-InlineEditLabel">
        <span class="ms-crm-InlineEditLabelText" style="max-width:125px;text-align:Left;">Sale Status</span>
        <div class="ms-crm-InlineField withReqIcon"></div>
        <img alt="Required" src="/_imgs/frm_required.gif" class="ms-crm-Inline-RequiredLevel">
    </span>
</td>
<td class="ms-crm-Field-Data-Print" colspan="4">
    <div class="highContrast ms-crm-Inline-Chrome status">
        <div id="scn_sctps_valueContainer" class="ms-crm-Inline-Value">
            <span>None</span>
        </div>
        <div id="scn_sctps_ctrlContainer"
             class="ms-crm-Inline-Edit ms-crm-Inline-OptionSet noScrool ms-crm-Inline-HideByZeroHeight"
             style="display: none;">
            <select class="ms-crm-SelectBox ms-crm-Inline-OptionSet-AutoOpen" controlmode="normal"
                    id="scn_sctps_select" size="7">
                <option value="bs1">None</option>
                <option value="bs2">Qualification</option>
                <option value="bs621740000">Needs Analysis</option>
                <option value="bs621740001"
                        style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(128, 130, 133); background-color: rgb(241, 241, 241);">
                    Proposal/Quote
                </option>
                <option value="sb621740001621745001"
                        style="padding-left: 20px; background-color: rgb(249, 249, 249);">In Production
                </option>
                <option value="sb621740001621745002"
                        style="padding-left: 20px; background-color: rgb(249, 249, 249);">Prepared and Passed to
                    Sales
                </option>
                <option value="sb621740001621745003"
                        style="padding-left: 20px; background-color: rgb(249, 249, 249);">Rejected by Production
                </option>
                <option value="sb621740001621745004"
                        style="padding-left: 20px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(128, 130, 133); background-color: rgb(249, 249, 249);">
                    Rejected By Sales
                </option>
                <option value="bs621740003">Proposal sent</option>
                <option value="bs621740002">Negotiation/Review</option>
                <option value="bs621740004">Postponed</option>
            </select>
        </div>
        <span class="ms-crm-Inline-LockIcon" style="display:none;">
            <img src="/_imgs/inlineedit/locked.png" alt="locked">
        </span>
    </div>
</td>
</tr>

外观：

Control appearance

select与定义size之间的区别在于select显示为已展开，并且您不需要与他进行任何互动（它与您尝试打开{{1}相关以编程方式）。

您可能会感到惊讶，但正如我之前提到的select状态（已经使用已定义的select属性进行了扩展），它是将{CSS}应用于任何CSS样式的唯一方法{{1} }标签里面。

标记说明：

第一个size节点包含代表控件附近的标签（字段显示名称）的元素。第二个option包含与下拉控件直接相关的标记，并包含两个主要部分：＆＃39; label＆＃39; （显示当前所选值的名称）和默认情况下处于隐藏状态的td。

您的职责：

您应该处理并正确回应与您的控件的所有用户交互。有一个控制功能的候选名单，您应该自己实施：
1.将实际值设置为标签，并在表单加载上设置td 2.存储用户交互的结果。 MS的表单引擎无法自动确定您控件中的更改 3.显示select并隐藏＆＃39;标签＆＃39;用户点击＆＃39;标签＆＃39;和落后的操作。

如何根据Dynamics CRM表单实施隐藏元素：

请查看ID为 scn_sctps_ctrlContainer 的select元素。您可以找到select和名为div的CSS类。这两件事可以帮助你隐藏元素。

如果您有任何疑问，请随时提出。

在HTML

1 个答案: