Question

以下代码工作正常。但是当显示下拉列表时，它不应该覆盖名为get value的按钮元素并在其下方获得显示值。当显示下拉列表时，按钮应该移动项目被选中按钮应该到原来的位置。

<html >
<head>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
    <script>dojoConfig = {parseOnLoad: true}</script>
    <script src='dojo/dojo.js'></script>
    <script>
require([
    "dojo/store/Memory", "dijit/form/FilteringSelect", "dojo/domReady!"
], function(Memory, FilteringSelect){
    var stateStore = new Memory({
        data: [
            {name:"Alabama", id:"AL"},
            {name:"Alaska", id:"AK"},
            {name:"American Samoa", id:"AS"},
            {name:"Arizona", id:"AZ"},
            {name:"Arkansas", id:"AR"},
            {name:"Armed Forces Europe", id:"AE"},
            {name:"Armed Forces Pacific", id:"AP"},
            {name:"Armed Forces the Americas", id:"AA"},
            {name:"California", id:"CA"},
            {name:"Colorado", id:"CO"},
            {name:"Connecticut", id:"CT"},
            {name:"Delaware", id:"DE"}
        ]
    });

   var filteringSelect = new FilteringSelect({
        id: "stateSelect",
        name: "state",
        value: "CA",
        store: stateStore,
        searchAttr: "name"
    }, "stateSelect");
    var filteringSelect = new FilteringSelect({
        id: "stateSelect1",
        name: "state",
        value: "CA",
        store: stateStore,
        searchAttr: "name"
    }, "stateSelect1");
});
</script>
</head>
<body class="claro">
    <input id="stateSelect"><br/>
    <br/>
    <br/>
     <input id="stateSelect1">
      <input id="stateSelect">
<p>
    <button onclick="alert(dijit.byId('stateSelect').get('value'))">Get value</button>
    <button onclick="alert(dijit.byId('stateSelect').get('displayedValue'))">Get displayed value</button>
</p>
</body>
</html>

Answer 1

我不确定你的意思是“不应该覆盖按钮元素”，因为它当然应该。下拉菜单应该是叠加层，它不是页面的一部分。您是否希望它成为页面的一部分是不同的。

使用过滤选择无法轻松完成此操作。过滤选择将用于保存选项的div附加到页面底部。您无法在页面的正常流程中显示它。您必须创建一个自定义窗口小部件，将其选项附加到选择输入正下方的容器中。

但是我不知道你要做什么来解决这个问题。我的建议是保持原样，除非你有充分的理由去改变它。下拉菜单是一个非常根深蒂固的GUI组件，因此不建议改变它的行为。

编辑：如果要限制下拉列表的高度。设置filteringSelect的“maxHeight”。

 var filteringSelect = new FilteringSelect({
    id: "stateSelect",
    name: "state",
    value: "CA",
    store: stateStore,
    searchAttr: "name",
    maxHeight: 40
}, "stateSelect");

这是一个小提琴。 http://jsfiddle.net/8sh24/

移动和重定位HTML元素

1 个答案: