如何动态构造和设置 dijit.form.select 小部件的选项？答案

【问题标题】：How to dynamically construct and set options for dijit.form.select widget?如何动态构造和设置 dijit.form.select 小部件的选项？
【发布时间】：2014-10-16 17:31:36
【问题描述】：

我有一个如下的选择小部件

var pulseLen = new Select({
    id : "_PulseLength",
    label:"PulseLength",
    name: "pulseLength",
    value : 100,
    options: [
              { label : "5", value :"5" },
              { label : "10", value :"10" },
              { label : "30", value :"30" },
              { label : "100", value :"100" },
              { label : "300", value :"300" }
              ]
        });

现在，根据在上述 pulseLength 小部件中选择的值，我必须更改以下 Select Range 小部件的选项它是 GUI 验证的一部分。

   var range = new Select({
          id:"_Range",
          label:"Range"),
          name: "range",
          value: "5000",
        options: [
          { label : "5", value :"5000" },
          { label : "10", value :"10000" },
          { label : "20", value :"20000" },
          { label : "40", value :"40000" },
          { label : "80", value :"80000" },
          { label : "160", value :"160000" },
          { label : "260", value :"260000" }
          ]
});

生成动态选项的 API

 function getRangeArray(pulselen){

    var myOptions = "";
    var array = [0.5,1,2,5,10,20,40];
    console.log("Length got is " + pulselen);
    for(i=0;i<array.length;i++){
        var myTmp = "{label : '" + array[i] + "', value : '"+array[i] * 1000 + "'}";
        //console.log(myTmp);
        if(i==array.length-1){

            myOptions = myOptions + myTmp;
        }else{
            myTmp=myTmp+",";
            myOptions = myOptions + myTmp;  
        }

        //console.log(myOptions);
    }

    //console.log(myOptions);
    myOptions = "[" + myOptions + "];";
    return myOptions;
}

pulseLength 的 OnChange 事件尝试更改选项

  var newOptions = getRangeArray(value);
  console.log(newOptions);
  registry.byId("_Range").set("options", newOptions);

样本输出

[{label : '0.5', value : '500'},
 {label : '1', value : '1000'},
 {label : '2', value : '2000'},
 {label : '5', value : '5000'},
 {label : '10', value : '10000'},
 {label : '20', value : '20000'},
 {label : '40', value : '40000'}];

【问题讨论】：

Dojo 的版本是什么？...尤其是如果您必须破解小部件的内部结构，这真的很重要
范围选择小部件有一个 ;在“值：”之后和“标签：范围”之后的一个）。这只是一个错字吗？
我应该将它作为对象进行类型转换吗？我正在使用 DOJO 1.9

标签： java javascript dojo dijit.form

【解决方案1】：

我认为这里有一些问题。就像 Thomas Kagan 在 cmets 中所说，有一些错别字：

范围选择小部件有一个 ;在 "value:" 和 a ) "label:" 之后范围”。

接下来，在您的 getRangeArray 函数中，您实际上是在构建一个字符串！这不是必需的 - 您必须使用 JSON.parse 解析它才能有用。相反，只需直接使用对象构建数组：

function getRangeArray(pulselen){

    var myOptions = [];
    var array = [0.5,1,2,5,10,20,40];
    console.log("Length got is " + pulselen);
    for(i=0;i<array.length;i++){
        myOptions.push({label: array[i].toString(), value: "" + array[i]*1000 });
    }
    return myOptions;
}

请注意，我在标签上调用了toString()！否则 dijit/form/Select 会抛出一些非常奇怪的错误 - 它希望标签是字符串。

另外，虽然我不知道是否有必要，但您可能必须在更新其选项后在 _Range 小部件上调用 reset()：

registry.byId("_Range").set("options", newOptions).reset();

.. 至少你以前是这样，但现在没有它似乎也可以工作。

这里是你的代码和更新的部分：http://jsfiddle.net/ycrz1ug4/

【讨论】：