2 Stimmen

Wie kann ich eine dijit.form.Select mit mehreren Elementen mit dem gleichen Wert arbeiten?

Ich habe eine dijit.form.Select Widget, mit dem ich die Beschriftungen den Werten zuordne. Einige Beschriftungen müssen denselben Wert haben, aber ich muss in der Lage sein, zwischen den Beschriftungen zu unterscheiden, wenn eine Auswahl getroffen wird. Im Moment sehen die Optionen des Widgets etwa so aus:

[
    {
        label: "A",
        value: "1",
    },
    {
        label: "B",
        value: "2"
    },
    {
        label: "C",
        value: "2"
    }
],

Das geschieht, weil die Verarbeitung des Formulars wissen muss, dass "B" und "C" beide tatsächlich 2 bedeuten, aber ich muss eine andere Logik auf einem anderen Steuerelement ausführen, wenn "B" gegenüber "C" ausgewählt wird. Ich habe herausgefunden, dass ich get("displayedValue") im onChange Ereignisbehandlungsroutine, um die "angezeigte" Beschriftung zu erhalten, aber es wird immer die erste Option (B), die mit dem aktuellen Wert (2) übereinstimmt, der nicht unbedingt das, was der Benutzer ausgewählt hat .

Wie kann ich also mit dem Fall umgehen, dass mehrere Bezeichnungen denselben Wert auswerten müssen, aber dennoch in der Lage sind, zwischen den Bezeichnungen zu unterscheiden?

0voto

Elad Punkte 132

Einfach das dijit/form/Select-Widget verwenden focusNode.textcontent Attribut:

function disaplySelected() {
  document.getElementById("labelContainer").innerHTML = window.sel.focusNode.textContent;
  document.getElementById("valueContainer").innerHTML = window.sel.value;
}

require(["dijit/form/Select", "dojo/_base/window", "dojo/domReady!"], function(Select, win) {
  window.sel = new Select({
    name: "select2",
    options: [
      {label: "A",value: "1"},
      {label: "B",value: "2"},
      {label: "C",value: "2"}
    ],
  });
  window.sel.placeAt(win.body(), "first").startup();
});

<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js" data-dojo-config="async: true"></script>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dijit/themes/claro/claro.css">
</head>

<body class="claro">
  <p>
    <button onclick="disaplySelected()">Display selected label</button>
    <br/>Selected item label: <span id="labelContainer"></span>
    <br/>Selected item value: <span id="valueContainer"></span>
  </p>
</body>
</html>

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X