Dojo Select onchange 在以编程方式创建 Select 框时未触发

Question

我有两个 dojo select 下拉菜单。第一个下拉列表是在页面加载时填充的，并且在 select 从第一个下拉列表中输入值时，应该填充第二个 select 框。我以编程方式创建第二个 select 框，并为第一个下拉框的每个更改事件销毁它。（这是为了避免小部件已注册错误）。

但是当我 select 第二个下拉列表 select 中的任何选项时，它不会触发 onchange 事件。

请帮忙解决这个问题。

我的密码是

require(["dojo/parser","dijit/form/RadioButton","dojo/ready","dojo/data/ItemFileReadStore","dijit/registry","dijit/form/Select","dojo/ready","dojo/dom-form", "dojo/dom", "dojo/on",  "dojo/request","dojo/domReady"],
        function(parser,RadioButton,ready,ItemFileReadStore,registry,Select,ready,Form,dom,on,request){
parser.parse();
var manuData;
var modelData;
var shaftType;
var modelId;
var clubMfr;
var clubType;
var manufacturerList;
dojo.connect(dijit.byId("clubtype"),"onChange",function(event){
    clubType=registry.byId("clubtype").get('value');
    console.log(clubType);
    var id= registry.byId("clubtype");
    var option1= registry.byId("manufacturer");
    request("/tradeIn/"+clubType).then(function(list){
        manuData=list;
        var data1 = dojo.fromJson(manuData);
        var readstore=new ItemFileReadStore({ data:{
            identifier : "manufacturer",
            label: "manufacturer",
            items : data1,

        }});

        if(typeof registry.byId("manufacturerId") != "undefined"){
            registry.byId("manufacturerId").destroyRecursive();
        }
        manufacturerList=new Select({
            name:"manufacturerId",
            id:"manufacturerId",
            store:readstore,
            onSetStore: function() {
                this.options.unshift({selected:'true',label:'Choose One', value:'NULL'});
                this._loadChildren();
            }
        }).placeAt("manuList");
        manufacturerList.startup();
    });


}
);


dojo.connect(
        dijit.byId("manufacturerId"),"onChange",function(event){

            var manufacturerId=registry.byId("manufacturerId").get('value');
            clubMfr=manufacturerId;
            var model= registry.byId("model");
            model.removeOption(dijit.byId("model").getOptions());


            request("/tradeIn/"+manufacturerId+"/"+clubType).then(function(list){

                modelData=list;

                var data1 = dojo.fromJson(modelData);
                var readstore=new ItemFileReadStore({ data:{
                    identifier : "model",
                    label: "model",
                    items : data1
                }});

                if(typeof registry.byId("modelId") != "undefined"){
                    registry.byId("modelId").destroyRecursive();
                }
                var modelList=new Select({
                    name:"modelId",
                    id:"modelId",
                    store:readstore,
                    onSetStore: function() {
                        this.options.unshift({selected:'true',label:'Choose One', value:'NULL'});
                        this._loadChildren();
                    }
                }).placeAt("modelList");
                modelList.startup();
            });

        }
);

dojo.connect(
        dijit.byId("model"),"onChange",function(event){

            modelId=registry.byId("model").get('value');

            console.log("model "+modelId);

        }
);


});

Answer 1

您需要在销毁 select 之前断开 onChange 事件，并在创建 select 之后重新连接它。要实现断开连接，可以使用own()方法。它应该是这样的：

if(typeof registry.byId("manufacturerId") != "undefined"){
    registry.byId("manufacturerId").destroyRecursive();
}
manufacturerList=new Select({/* ... */});
manufacturerList.own(dojo.connect(
    dijit.byId("manufacturerId"),"onChange",function(event){ /* ... */ }
));

注意：这太脏了。正确的方法是不销毁第二个 select 而是更新其数据。

查看更新它的片段：

require(['dijit/form/Select', 'dojo/data/ItemFileReadStore', 'dojo/domReady!'], function(Select, ItemFileReadStore) {
  
  var initialStoreData = [
    {value: "AL", label: "Alabama"},
    {value: "AK", label: "Alaska"},
    {value: "AZ", label: "Arizona"}
  ];
  var changedStoreData = [
    {value: "CA", label: "California"},
    {value: "CO", label: "Colorado"},
    {value: "CT", label: "Connecticut"}
  ];
  
  var prepareData = function(storeData) {
    //because the store return sorted data, I have added a space before the word 'Choose'. So it comes first
     return [{value: '', label: ' Choose one'}].concat(storeData);  
  }
  
  var readStore=new ItemFileReadStore({
    data:{
      identifier: "value",
      label: "label",
      items: prepareData(initialStoreData)
    }
  });
  
  
  var selectWidget = new Select({
    store: readStore
  
  });
  selectWidget.placeAt(document.getElementById('test'));
  selectWidget.startup();
  
  
  btn.onclick = function() {
    var newReadStore=new ItemFileReadStore({
      data:{
        identifier: "value",
        label: "label",
        items: prepareData(changedStoreData)
      }
    });
    
    selectWidget.set('store', newReadStore);
  }
});

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css"> 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/form/resources/CheckedMultiSelect.css">


<div id="test" class="tundra">
  <button id="btn">change data in select</button>
</div>

Dojo Select onchange 在以编程方式创建 Select 框时未触发

Dojo Select onchange not firing on creating Select box programmatically

dojo

onchange