comboMenu示例

本示例演示的json数据为：

 

[ {
	"value" : "ln",
	"text" : "辽宁",
	"children" : [ {
		"value" : "ln-sy",
		"text" : "沈阳"
	}, {
		"value" : "ln-dl",
		"text" : "大连"
	}, {
		"value" : "ln-yk",
		"text" : "营口",
		"children" : [ {
			"value" : "ln-yk-xs",
			"text" : "西市区"
		}, {
			"value" : "ln-yk-zq",
			"text" : "站前区"
		} ]
	} ]
}, {
	"value" : "bj",
	"text" : "北京",
	"children" : [ {
		"value" : "bj-dc",
		"text" : "东城区"
	}, {
		"value" : "bj-xc",
		"text" : "西城区"
	}, {
		"value" : "bj-hd",
		"text" : "海淀区"
	}, {
		"value" : "bj-cy",
		"text" : "朝阳区"
	}, {
		"value" : "bj-ft",
		"text" : "丰台区"
	}, {
		"value" : "bj-sjs",
		"text" : "石景山区"
	} ]
}, {
	"value" : "jl",
	"text" : "吉林",
	"children" : [ {
	"value" : "jl-cq",
		"text" : "长春"
	}, {
		"value" : "jl-jl",
		"text" : "吉林"
	}, {
		"value" : "jl-ly",
		"text" : "辽源"
	}, {
		"value" : "jl-sp",
		"text" : "四平"
	} ]
} ];

 

一个最简单的comboMenu:

 

<div id="cmb_1"></div>

$(function() {
	$("#cmb_1").comboMenu({
		data : demoData
	});
});

  

添加说明标签：

 

<div id="cmb_2"></div>

$(function() {
	$("#cmb_2").comboMenu({
		data : demoData,
                title : "地区"
	});
});

  

异步取数后，给comboMenu设定值：

 

<div id="cmb_3"></div>
<input id="btnSetCmb_3" type="button" οnclick="btnSetCmb_3_click()" value="设置data并设置默认值"></input>

$(function() {
	$("#cmb_3").comboMenu({
		title : "地区"
	});
});

function btnSetCmb_3_click() {
	$("#cmb_3").comboMenu("setData", demoData);
	$("#cmb_3").comboMenu("setValue", "bj-hd");
}

 

取得控件的选择值：

 

<div id="cmb_4"></div>
<input id="btnSetCmb_4" type="button" οnclick="btnSetCmb_4_click()" value="取值"></input>

$(function() {
	$("#cmb_4").comboMenu({
		data : demoData
	});
});

function btnSetCmb_4_click() {
	var val = $("#cmb_4").comboMenu('getValue');
	var txtArr = new Array();
	txtArr.push(val.text);
	var parent = val.parent;
	while (parent) {
		txtArr.push(parent.text);
		parent = parent.parent;
	}
	alert(txtArr.reverse().join(" > "));
}

  

设置comboMenu所有的级别都可以选择，并设置可以选择“全部数据”，从而达到全量选择的效果。

注：这个alert的是控件值(json对象)里的value属性。

<div id="cmb_5"></div>
<input id="btnSetCmb_5" type="button" οnclick="btnSetCmb_5_click()" value="取值"></input>

$(function() {
	$("#cmb_5").comboMenu({
		data : demoData,
		allLeafCanSelect : true,
		hasAllData : true
	});
});

function btnSetCmb_5_click() {
	var val = $("#cmb_5").comboMenu('getValue');
	var txtArr = new Array();
	txtArr.push(val.value);
	var parent = val.parent;
	while (parent) {
		txtArr.push(parent.value);
		parent = parent.parent;
	}
	alert(txtArr.reverse().join(" > "));
}

  

样式演示(设置宽、高，以及poplist的宽，并隐藏搜索功能):

<div id="cmb_6"></div>

$("#cmb_6").comboMenu({
	data : demoData,
	height : 25,
	width : 160,
	popWidth : 120,
	useSearch : false
});

  

事件演示(onclick,onShow,onChanged,onHide):

<div id="cmb_7"></div>

$("#cmb_7").comboMenu({
	data : demoData,
	onShow : function() {
		alert("onShow!!");
	},
	onHide : function() {
		alert("onHide!!");
	},
	onClick : function() {
		alert("onClick!!");
	},
	onChanged : function(oldValue, newValue) {
		var oldText = oldValue ? oldValue.text : "";
		var newText = newValue ? newValue.text : "";
		alert("onChanged!! oldValue:" + oldText + ", newValue:" + newText);
	}
});