使用 dojo ajax 填充下拉列表答案

【问题标题】：populate dropdown list with dojo ajax使用 dojo ajax 填充下拉列表
【发布时间】：2012-09-10 18:26:43
【问题描述】：

嘿，我正在使用以下代码制作级联下拉菜单，其中，我创建了一个函数 xyz()，其中调用了一个 ajax 调用 servlet 并设置结果变量中的值，结果中的值由逗号，所以我用逗号将它拆分，然后存储到第二个下拉列表中。错误的值是我选择预览..请告诉我有什么问题

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    <link rel="stylesheet" href="js/dojo/dijit/themes/claro/document.css"/>
    <link rel="stylesheet" href="js/dojo/dijit/themes/claro/claro.css" />
    <script src='js/dojo/dojo/dojo.js' data-dojo-config=' parseOnLoad: true'></script>
    <script>
        dojo.require("dijit.form.ComboBox");
        dojo.require("dojo.data.ItemFileReadStore");
        dojo.require("dojo.ready");
        dojo.require("dojo.store.Memory");
        require(["dojo/parser", "dijit/form/ComboBox","dijit/form/TextBox","dojo/dom-construct"]);
     function xyz(){
      dojo.xhrPost({
            // The URL to request
            url: "populate",
            timeout :  3000 ,
            content: {
                username: document.getElementById("state").value

            },

            load: function(result) {                
         require(["dijit/form/ComboBox", "dojo/ready","dojo/store/Memory"], 
                function(ComboBox,ready,Memory){

                    ready(function() {

                        dojo.connect(dijit.byId('state'), 'onChange', function() {

                            var stateSelect = dijit.byId('stateSelect');

                            if (!stateSelect) {
                                stateSelect = new ComboBox({id: "stateSelect",name:"select",value: "Select",searchAttr:"name"},"stateSelect");

                            }

                            var str_array = result.split(',');

                            var data = [];
                            dojo.forEach(str_array, function(item, idx) {
                                data.push({
                                    id: idx,
                                    name: item                    
                                });
                                stateSelect.set('store', new Memory({data: data}));


                            });


                        }); // dojo.connect



                    }); // ready   



                }); // require  

        }



      });

    }


    </script>
</head>
<body class="claro">

    <select data-dojo-type="dijit.form.ComboBox" id="state" name="state" onchange="xyz()"  >

        <option selected>Andaman Nicobar</option>
        <option>Andhra Pradesh</option>
        <option>Arunachal Pradesh</option>


    </select>

    <select data-dojo-type="dijit.form.ComboBox" id="stateSelect" name="stateSelect">

    </select>


</body>

【问题讨论】：

标签： java javascript ajax dojo

【解决方案1】：

第二次尝试填充 stateSelect 的原因是您使用了 dojo.connect，它只是将 state 上的 onChange 事件绑定到完成填充 stateSelect 工作的回调。

删除 dojo.connect。你不需要那个。

要获得正确的值，您应该执行以下操作您应该使用 dijit 注册表并转到 registry.byId("state").get("value") 而不是document.getElementById("state").value

您可能还想在此处使用 FilteringSelect，查看差异：区别在这里解释http://kennethfranqueiro.com/2010/06/combobox-vs-filteringselect/

还有更多信息：

使用dojo.request 模块代替xhrPost

您可以在 dom 准备好时添加事件处理程序，而不是 onchange=xyz()，并将您的函数作为回调

【讨论】：