样式 dijit.form.选择下拉菜单

Question

如果使用 HTML 标记，如何设置dijit.form.Select下拉菜单的样式。

<select id="sourceselect"   dojoType="dijit.form.Select" style='width:200px' onChange="changeDetected();">
</select>

为了明确起见，它希望设置包含内容的下拉菜单的样式。我想更改该菜单的高度，如果超过高度，则有一个滚动条。

我使用的是 Dojo 1.6 版。下面是一个小提琴示例：http://jsfiddle.net/NH7dd/。

编辑：为什么有缺点？

Answer 1

Dojo 生成的菜单放在 DOM 节点的根目录中。菜单以某种方式相对朝向文本字段定位是一个常见的错误，但事实并非如此。

如果要更改菜单的样式，则可以使用以下CSS选择器：

div[dijitpopupparent="sourceselect"] > .dijitMenu {
    /** Your CSS */
}

这样做的原因是因为菜单包装在 dijit/popup .此弹出窗口允许显示/隐藏菜单，如您所见，它有一个属性dijitpopupparent该属性具有字段的原始 ID。

我还更新了您的 JSFiddle，现在看起来像这样。但我真的不建议像这样更改菜单的行为，因为您可能会弄乱组合框的原始功能/行为。我的意思是，现在我在转到某些值时遇到问题，因为一个"滚动刻度"已经传递了一个值。使用更新的样式，我什至无法再正确选择"2"。

---

编辑：在更新的JSFiddle中，滚动条将始终可见，如果您希望滚动条仅在有更多选项时才显示，请将overflow-y: scroll更改为overflow-y: auto。

Answer 2

您可以设置 maxHeight 的属性。

<select id="sourceselect"   
dojoType="dijit.form.Select"
data-dojo-props="maxHeight: 200" 
style='width:200px' 
onChange="changeDetected();">
</select>

此外，dojo 的较新语法是"data-dojo-type"而不是"dojoType"。

下面是显示 maxHeight 属性的 JSFiddle。(我用的是道场 1.9，但 maxHeight 在 1.6 中可用(http://jsfiddle.net/NH7dd/17/