简体   繁体   English

如何使dijit.form.Select与具有相同值的多个项目一起使用?

[英]How can I make a dijit.form.Select work with multiple items having the same value?

I have a dijit.form.Select widget that I'm using to map labels to values. 我有一个dijit.form.Select小部件,用于将标签映射到值。 Some labels need to have the same value, but I need to able to differentiate between the labels when a selection is made. 一些标签需要具有相同的值,但是在进行选择时我需要能够区分标签。 Right now the widget's options look something like this: 现在,小部件的选项如下所示:

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

That is done because the form's processing needs to know that 'B' and 'C' both actually mean 2, but I need to perform some different logic on another control when 'B' vs 'C' is selected. 这样做是因为表单的处理需要知道'B'和'C'实际上都是2,但是当选择'B'与'C'时,我需要对另一个控件执行一些不同的逻辑。 I've found that I can get("displayedValue") in the onChange event handler to get the "displayed" label, but it will always return the first option (B) that matches the current value (2) which is not necessarily what the user selected . 我发现我可以在onChange事件处理程序中get("displayedValue")以获取“ displayed”标签,但是它将始终返回与当前值(2)匹配的第一个选项(B), 不一定是用户选择

So, how can I handle the case when multiple labels need to evaluate to the same value while still being able to differentiate between the labels? 那么,当多个标签需要评估为相同值而又仍然能够区分标签时,我该如何处理呢?

just use the dijit/form/Select widget focusNode.textcontent attribute: 只需使用dijit / form / Select小部件focusNode.textcontent属性即可:

 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> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM