javascript - 变量为空 - javascript

Question

我正在尝试使用演示 kendo ui 下拉列表。由于某种原因，当我创建变量“dropdownlist”来设置其数据源时，该变量为 null 任何人都可以看到需要更改什么？

这是使用它的演示 http://demos.telerik.com/kendo-ui/dropdownlist/index

function getcombo() {
        var data = getVillages();
        console.log(data);
        var dropdownlist = $("#color").data("kendoDropDownList");
        console.log(dropdownlist);                                //error here
        dropdownlist.setDataSource(data);      
    };

在我的 html 中我有:

<div id="example">
        <div id="cap-view" class="demo-section k-header">
            <h2>Customize your Kendo Cap</h2>
            <div id="cap" class="black-cap"></div>
            <div id="options">
            <h3>Cap Color</h3>
            <input id="color" value="1" />

            <h3>Cap Size</h3>
            <select id="size">
                <option>S - 6 3/4"</option>
                <option>M - 7 1/4"</option>
                <option>L - 7 1/8"</option>
                <option>XL - 7 5/8"</option>
            </select>

            <button class="k-button" id="get">Customize</button>
            </div>
        </div>
        <style scoped>
            .demo-section {
                width: 460px;
                height: 300px;
            }
            .demo-section h2 {
                text-transform: uppercase;
                font-size: 1em;
                margin-bottom: 30px;
            }
            #cap {
                float: left;
                width: 242px;
                height: 225px;
                margin: 20px 30px 30px 0;
                background-image: url('../content/web/dropdownlist/cap.png');
                background-repeat: no-repeat;
                background-color: transparent;
            }
            .black-cap {
                background-position: 0 0;
            }
            .grey-cap {
                background-position: 0 -225px;
            }
            .orange-cap {
                background-position: 0 -450px;
            }
            #options {
                padding: 1px 0 30px 30px;
            }
            #options h3 {
                font-size: 1em;
                font-weight: bold;
                margin: 25px 0 8px 0;
            }
            #get {
                margin-top: 25px;
            }
        </style>

            <script>
                $(document).ready(function() {
                    var data = [
                        { text: "Black", value: "1" },
                        { text: "Orange", value: "2" },
                        { text: "Grey", value: "3" }
                    ];

                    // create DropDownList from input HTML element
                    $("#color").kendoDropDownList({
                        dataTextField: "text",
                        dataValueField: "value",
                        dataSource: data,
                        index: 0,
                        change: onChange
                    });

                    // create DropDownList from select HTML element
                    $("#size").kendoDropDownList();

                    var color = $("#color").data("kendoDropDownList");

                    color.select(0);
                    var size = $("#size").data("kendoDropDownList");

                    function onChange() {
                        var value = $("#color").val();
                        $("#cap")
                            .toggleClass("black-cap", value == 1)
                            .toggleClass("orange-cap", value == 2)
                            .toggleClass("grey-cap", value == 3);
                    };

                    $("#get").click(function() {
                        alert('Thank you! Your Choice is:\n\nColor ID: '+color.value()+' and Size: '+size.value());
                    });
                });
            </script>
        </div>

Answer 1

我的猜测是“jQuery.data( element, key, value )”

通常，“null”仅在用户将变量显式设置为“null”时才存在，否则它将是未定义的

顺便说一句，您可以使用逗号来 console.log(arg1, arg2, 等) 将它们一次性记录在同一行