【kendo UI】下拉框 kendoDropDownList

最新推荐文章于 2021-08-09 11:18:28 发布

原创最新推荐文章于 2021-08-09 11:18:28 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ui

kendo UI 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用 Kendo UI 的 DropDownList 控件实现网站的多语言切换功能。通过设置下拉列表的数据源和选择事件，可以在不同语言间进行切换，并更新页面显示的语言版本。

$("#culture").kendoDropDownList({
	                    	select : languageChange,
	                        dataTextField: "text",
	                        dataValueField: "fieldValue",
	                        dataSource: languages,
	                        index: switchIndex('${language==null?"en_US":language}')
//初始化选择值	                    });

function languageChange(te) {
	                       var dataItem = this.dataItem(te.item.index());
		window.location.href="${pageContext.request.contextPath}/login.do?language="+dataItem.fieldValue;
	                    }

var languages = [ { text: "简体中文", fieldValue: "zh_CN" }, 
                  { text: "English", fieldValue: "en_US" },
                  { text: "한국어", fieldValue: "ko_KR" }
              ];

function switchIndex(language){
	if(language!=""){
		for (var i=0;i<languages.length;i++){
			if(language==languages[i].fieldValue){
				return i;
			}
		}
	}
	return 0;
}

详细请参考：

http://docs.kendoui.com/api/web/dropdownlist