Dojo 移动和重新定位HTML元素_Dojo

Dojo 移动和重新定位HTML元素

dojo

Dojo 移动和重新定位HTML元素,dojo,Dojo,下面的代码工作正常。但当显示下拉列表时，它不应覆盖其下方名为get value和get displayed value的按钮元素。相反，当显示下拉列表时，按钮应向下移动，并且在选择特定项目后，按钮应回到原始位置 <html > <head> <link rel="stylesheet" href="dijit/themes/claro/claro.css"> <script>dojoConfig = {parseOnLoad: true}&

下面的代码工作正常。但当显示下拉列表时，它不应覆盖其下方名为get value和get displayed 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>


dojoConfig={parseOnLoad:true}
要求([
“dojo/store/Memory”、“dijit/form/FilteringSelect”、“dojo/domReady！”
]，功能（存储器，过滤器选择）{
var stateStore=新内存({
数据：[
{姓名：“阿拉巴马州”，id:“AL”}，
{姓名：“阿拉斯加”，id：“AK”}，
{名称：“美属萨摩亚”，id:“AS”}，
{姓名：“亚利桑那州”，id:“亚利桑那州”}，
{姓名：“阿肯色州”，id:“AR”}，
{名称：“欧洲武装部队”，id:“AE”}，
{姓名：“太平洋武装部队”，id:“AP”}，
{姓名：“美洲武装部队”，id:“AA”}，
{姓名：“加利福尼亚”，id：“CA”}，
{姓名：“科罗拉多”，id：“CO”}，
{姓名：“康涅狄格州”，id:“CT”}，
{姓名：“特拉华州”，id:“德”}
]
});
var filteringSelect=新filteringSelect({
id:“stateSelect”，
名称：“国家”，
值：“CA”，
商店：stateStore，
searchAttr:“名称”
}，“国家选择”）；
var filteringSelect=新filteringSelect({
id:“stateSelect1”，
名称：“国家”，
值：“CA”，
商店：stateStore，
searchAttr:“名称”
}“州选择1”）；
});







获得价值
获取显示值

我不确定您所说的“不应该覆盖按钮元素”是什么意思，因为它肯定应该覆盖按钮元素。下拉菜单应该是一个覆盖，它不是页面的一部分。您是否希望它成为页面的一部分是不同的

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

但我不知道你这么做想解决什么问题。我的建议是保持现状，除非你有很好的理由改变它。下拉菜单是GUI中根深蒂固的组件，因此不建议更改其行为

编辑：如果要限制下拉列表的高度。设置过滤器选择的“最大高度”

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

这是一把小提琴

好的，Matt，可以在过滤中添加滚动条吗select@user2956454，我已编辑我的答案以限制下拉列表的大小。如果需要，将自动添加滚动条。