Dojo js Select 和 onchange 函数答案

【问题标题】：Dojo js Select and onchange functionDojo js Select 和 onchange 函数
【发布时间】：2014-07-15 16:13:51
【问题描述】：

我正在使用 dojo.js 制作具有滚动功能的下拉框，这不是标准选择语句的原生功能。

我已经设法创建了下拉菜单，但是我很难让它使用 select 语句的标准 onchange 属性来执行一个函数。 onchange = "updateData()" 在这种情况下。

感谢任何帮助。

 <html>
    <head>
    <title>drop down</title>
    <link rel="stylesheet" href="d3/dijit/themes/claro/claro.css">
    <script type="text/javascript" src="d3/d3.js"></script>
    <script>dojoConfig = {async: true}; </script>
<script src='d3/dojo/dojo.js'></script>  
<script src='d3/dijit/dijit.js' ></script> 


    <script> 

var djConfig = {
    isDebug: true}; </script>

    <script type="text/javascript">
require(["dojo/widget/Select"]);</script> 

    <script> 

require(["dojo/parser"], function(parser) {
parser.parse();});
    </script>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">

    <style>                                        
        #dropdown{

            font-size: 22px;
            font-family:  serif;
            color: grey;}
                   </style>




</head>
<body>

<div class="claro">
        <select 
 id="dropdown" data-dojo-type="dijit/form/Select" data-dojo-props="maxHeight:50" 
 style="width: 100px" onchange= "updateData()" >

            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
        </select>
    </div>         


 <script type="text/javascript">


 //The following is used to reset the dropdown box to original value on pg refresh
 document.getElementById("dropdown").selectedIndex = 0;

函数 updateData() {alert("hello")}

 </script>

 </body>
 </html>

【问题讨论】：

您的代码格式不正确。请确保您的代码没有错误并且格式正确，以便其他人响应。这表明总体上缺乏对该主题的理解。
您需要选择代码并按 ctrl-k 格式化代码。

标签： javascript jquery html d3.js dojo

【解决方案1】：

var dropDown = new Select({
               name: "select2",
               id: "projectDropDown",
               onChange: function (value) 
               {
                 //console.log("project Id: ", this.get("value"))
                 reScopeProjectContext(value,satpcontext);
               },
               store: projectStore,
               labelAttr: "name",
               value: projectInContext,
               }).placeAt(win.body()).startup();

【讨论】：

您好，欢迎来到 stackoverflow，感谢您的回答。您能否简单地解释一下您解决了什么问题以及您是如何解决的，而不是仅仅发布一段代码？这将有助于以后发现此问题的人更好地了解该问题以及如何处理它。

【解决方案2】：

updatedata 函数是在select 小部件 声明之后定义的。这行不通
试试下面的代码。

<!DOCTYPE html>
<html>
<head>
    <link href="dojo/dojo-release-1.9.3-src/dijit/themes/claro/claro.css" rel="stylesheet"/>
    <script type="text/javascript">
        dojoConfig = {
            async: true,
            parseOnLoad: true
        };
    </script>
    <script type="text/javascript" src="dojo/dojo-release-1.9.3-src/dojo/dojo.js"></script>
    <script type="text/javascript">
        require(["dojo/parser", "dijit/form/Select"],function(parser){
            parser.parse();

        });
        function updateData(){
            alert("Onchange function called");
        }

    </script>
</head>
<body class="claro">
<select name="select1" data-dojo-type="dijit/form/Select" onchange="updateData()">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>
</body>
</html>

【讨论】：

感谢这对警报有效。但是，我想要实现的是获取所选项目的值并在我的函数中使用它。例如，如果我从下拉框中选择 opt 'A' 并尝试使用 eval("("+dropdown.value+")") 获取值，它根本不起作用。所以更深层次的问题是如何将下拉框的选择值传递给函数？使用标准代码可以正常工作，但在 dojo 中不行？任何帮助表示赞赏。
@user2259146 将onchange="updateData()" 替换为onchange="updateData"，然后就可以使用function updateData(newVal) { }。如果您对此有更多疑问或问题，您可能应该创建一个新问题。