如何使用 ajax 调用填充 select 框，其中 returns 使用 dojo 的字符串列表？

Question

我想使用 dojo 填充 select 框。我的 Spring 控制器 returns 一个 string 的 arraylist，我想把所有的字符串都放到我的 select 盒子里。

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

但是select框是空的上面的代码。我做错了什么？

Answer 1

使用 `dojo/Store` 和 `dijit/form/Select`

首先让我声明，我对 Spring 没有真正的经验，所以我反对你的说法，即你有一个 String 的 ArrayList 并且你希望他们是 dijit/form/Select 中的选项。如果您不想使用 dijit 小部件，或者您的意思是您想要使用没有 dojo 支持的常规 <select> 标记，那么您正在处理另一种解决方案。

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

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);
  });
});

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

此外，如果您不想使用 dijit/form/Select，您可以使用本机 JavaScript 方法（例如 document.createElement("option"); 和然后手动调整属性，但是既然你已经使用了带宽来加载dojo，你还不如使用它的DOM操作方法来让事情变得更容易，比如dojo/domConstruct.create().

没有`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，因此您应该重构它，使其不仅仅是一些内联脚本，就像我在本例中所做的那样。

如何使用 ajax 调用填充 select 框，其中 returns 使用 dojo 的字符串列表？

How do I populate a select box using an ajax call which returns a list of strings using dojo?

javascript

dojo

使用 `dojo/Store` 和 `dijit/form/Select`

没有`dijit/form/Select`

旁注

如何使用 ajax 调用填充 select 框，其中 returns 使用 dojo 的字符串列表？

How do I populate a select box using an ajax call which returns a list of strings using dojo?

javascript

dojo

使用 dojo/Store 和 dijit/form/Select

没有dijit/form/Select

旁注

使用 `dojo/Store` 和 `dijit/form/Select`

没有`dijit/form/Select`