如何使用ajax调用填充选择框，该调用使用dojo返回字符串列表？

时间：2015-10-05 15:24:42

标签： javascript dojo

我想使用dojo填充一个选择框。我的Spring控制器返回arraylist string，我希望将所有字符串放入我的选择框中。

    var currencyStore = new RequestMemory({
                target: "getCurrency"
        });
    var os = new ObjectStore({ objectStore: currencyStore });
    var currencyCombo = new Select({
            store: os
        }, "currency").startup();

但是使用上面的代码，选择框为空。我做错了什么？

1 个答案:

答案 0 :(得分：0)

使用dojo/Store和dijit/form/Select

首先让我说我没有真正的使用Spring的经验，所以我要说你有ArrayList String的{​​{1}}，你希望它们成为{dijit/form/Select的选项1}}。如果你不想使用dijit小部件，或者你的意思是你想使用没有dojo支持的常规<select>标记，那么你正在处理另一个解决方案。

话虽如此，您可以使用我在上面的评论中链接的示例：A Select Fed By A Store，以便更轻松地将您的数据集放入<select>并且能够利用其他细节小部件。

＆＃13;
＆＃13; 
require([
  "dijit/form/Select",
  "dojo/data/ObjectStore",
  "dojo/store/Memory",
  "dojo/_base/array",
  "dojo/dom",
  "dojo/html",
  "dojo/domReady!"
], function(
  Select,
  ObjectStore,
  Memory,
  array,
  dom,
  html
) {
  "use strict";

  /*
  We used the domReady! plugin so this code runs
  after the DOM has finished loading
  */

  // Predefine
  var strings, idStrings, store, objectStore, select;

  /*
  Strings is going to be the "arrayList of Strings" that you
  mention that you receive from your spring controller
  */
  strings = [
    "hello",
    "world",
    "foo",
    "bar"
  ];

  /*
  We are going to map your String array so that it has an 
  "id" property and a "label" property which will get used
  by the Store and the Select
  */
  idStrings = array.map(strings, function(str, index) {
    return {
      id: index,
      label: str
    };
  });

  // Make a Memory Store
  store = new Memory({
    data: idStrings
  });

  // Make an ObjectStore from the Memory
  objectStore = new ObjectStore({
    objectStore: store
  });

  // Create the Select and set its store to the one we just made
  select = new Select({
    name: "testSelect",
    store: objectStore
  }, "testSelect");

  // We need to run startup on programatically created widgets
  select.startup();

  // Add change listener for funzies
  select.on("change", function() {
    // Get the label from the store by the value of this Select
    var label = store.get(this.get("value")).label;

    // Set the innerHTML of our logger
    html.set(dom.byId("logger"), label);
  });
});
＆＃13; 
<!-- Include the dijit claro theme -->
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css">

<!-- Set our dojoConfig -->
<script>
  var dojoConfig = {
    parseOnLoad: false,
    isDebug: true,
    async: 1
  };
</script>
<!-- Include the dojo 1.10.4 CDN -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>


<body class="claro">
  <main>
    <!-- This Select is going to be replaced by our widget -->
    <select id="testSelect"></select>

    <!-- We're going to put output in this div -->
    <div role="log" id="logger"></div>
  </main>
</body>
＆＃13;
＆＃13;
＆＃13;

此外，如果您不想使用dijit/form/Select，您可以使用<select>之类的原生JavaScript方法自行向document.createElement("option");插入选项，然后使用属性手动，但由于您已经使用带宽来加载dojo，因此您可以通过使用其dojo/domConstruct.create()等DOM操作方法使自己更容易。

没有dijit/form/Select 

require([
    "dojo/_base/array",
    "dojo/dom",
    "dojo/dom-construct",
    "dojo/domReady!"
], function (
    array,
    dom,
    domConstruct,
) {
    "use strict";

    var strings, select;

    // We have our strings
    strings = [
        "hello",
        "world",
        "foo",
        "bar"
    ];

    // Get our select
    select = dom.byId("testSelect");

    // Iterate each string and put it into an option under our select
    array.forEach(strings, function (str, index) {
        domConstruct.create("option", {
            innerHTML: str,
            value: index
        }, select);
    });
});

旁注

您可能不需要使用dojo/_base/array。我出于支持旧浏览器的习惯这样做，因为我们已经使用了dojo。此外，您可能有自己的模块所在的设置，希望使用某种构建层而不是使用CDN，因此您应该重构它，以便它不仅仅是我在本示例中所做的一些内联脚本。

相关问题
最新问题