使用dojo ajax填充下拉列表

时间:2012-09-10 18:26:44

标签: java javascript ajax dojo

嘿我正在使用下面的代码来制作级联下拉列表,我在其中创建了一个函数xyz(),其中调用ajax调用servlet并在结果变量中设置值,结果中的值以分隔为逗号所以我把它用逗号和商店拆分成第二个下拉..现在的问题是当我改变第一个下​​拉列表第二个下拉列表没有填充但是调用了ajax,当我第二次更改值时,第二个dropdwn就会填充错误的价值,我选择预览..请告诉我什么是错的

<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>

1 个答案:

答案 0 :(得分:0)

第二次尝试填充stateSelect的原因是你使用dojo.connect,它只是将状态上的onChange事件绑定到回调函数,这将完成填充stateSelect的工作。

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

要获得正确的值,你应该做这样的事情 你应该使用dijit注册表并转到registry.byId("state").get("value") 而不是document.getElementById("state").value

此外,您可能希望在此处使用FilteringSelect,请参阅差异: 这里解释了差异http://kennethfranqueiro.com/2010/06/combobox-vs-filteringselect/

还有一些信息:

而不是xhrPost使用dojo.request模块

代替onchange=xyz(),你可以在dom准备好时使用你的函数作为回调来添加事件处理程序