Dojo js选择和更改功能

时间:2014-07-15 16:13:51

标签: javascript jquery html d3.js dojo

我正在使用dojo.js制作带滚动功能的下拉框,这不是标准select语句的原生。

我已经设法创建了下拉菜单,但是我很难使用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;

function updateData(){alert(&#34; hello&#34;)}

 </script>

 </body>
 </html>

2 个答案:

答案 0 :(得分: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();

答案 1 :(得分:0)

updatedata函数是在声明选择小部件之后定义的。这不会起作用 请尝试以下代码。

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