我正在尝试使用demo kendo ui dropdownlist。出于某种原因,当我创建变量“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>
答案 0 :(得分:1)
我的猜测是“jQuery.data(element,key,value)”
通常'null'只有在用户将变量设置为显式为'null'时才存在,否则它将是未定义的
顺便说一句,您可以使用逗号将console.log(arg1,arg2等)同时记录在同一行中