jQuery cxSelect 联动下拉菜单自定义选项

实例代码“Ctrl+/”提示“F11/ESC”全屏返回格式化恢复运行

<!DOCTYPE html>
<html>
	<head>
		<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
		<script type="text/javascript" src="https://ku.shouce.ren/libs/jquery/1/jquery1.7.2.min.js">
		</script>	
		<script type="text/javascript" src="//ku.shouce.ren/libs/cxselect/1.3/js/jquery.cxselect.min.js">
		</script>
	</head>
	<body>
		<div class="main">
			<div class="inwrap">
				<h1>jQuery cxSelect 联动下拉菜单
				</h1>
				<h2>自定义选项
				</h2>
				<div class="example">
					<fieldset id="custom_data">
						<legend>支持各种类型的数据
						</legend>
						<div class="form">
							<dl class="row">
								<dt>一
								</dt>
								<dd>
									<select class="first select">
									</select>
								</dd>
							</dl>
							<dl class="row">
								<dt>二
								</dt>
								<dd>
									<select class="second select">
									</select>
								</dd>
							</dl>
							<dl class="row">
								<dt>三
								</dt>
								<dd>
									<select class="third select">
									</select>
								</dd>
							</dl>
							<dl class="row">
								<dt>四
								</dt>
								<dd>
									<select class="fourth select">
									</select>
								</dd>
							</dl>
							<dl class="row">
								<dt>五
								</dt>
								<dd>
									<select class="fifth select">
									</select>
								</dd>
							</dl>
						</div>
					</fieldset>
					<p>PS: 自定义数据时，虽然值可以设置为除了文本以外的类型，但最终都会被转化为文本。
					</p>
				</div>
			</div>
		</div>
		<script>
			$('#custom_data').cxSelect({
				selects: ['first', 'second', 'third', 'fourth', 'fifth'],
				required: true,
				jsonValue: 'v',
				url: [
					{
						'v': '1', 'n': '第一级 >', 's': [
							{
								'v': '2', 'n': '第二级 >', 's': [
									{
										'v': '3', 'n': '第三级 >', 's': [
											{
												'v': '4', 'n': '第四级 >', 's': [
													{
														'v': '5', 'n': '第五级 >', 's': [
															{
																'v': '6', 'n': '第六级 >'}
														]}
												]}
										]}
								]}
						]}
					,
					{
						'v': 'test number', 'n': '测试数字', 's': [
							{
								'v': 'text', 'n': '文本类型', 's': [
									{
										'v': '4', 'n': '4'}
									,
									{
										'v': '5', 'n': '5'}
									,
									{
										'v': '6', 'n': '6'}
									,
									{
										'v': '7', 'n': '7'}
									,
									{
										'v': '8', 'n': '8'}
									,
									{
										'v': '9', 'n': '9'}
									,
									{
										'v': '10', 'n': '10'}
								]}
							,
							{
								'v': 'number', 'n': '数值类型', 's': [
									{
										'v': 11, 'n': 11}
									,
									{
										'v': 12, 'n': 12}
									,
									{
										'v': 13, 'n': 13}
									,
									{
										'v': 14, 'n': 14}
									,
									{
										'v': 15, 'n': 15}
									,
									{
										'v': 16, 'n': 16}
									,
									{
										'v': 17, 'n': 17}
								]}
						]}
					,
					{
						'v': 'test boolean','n': '测试 Boolean 类型', 's': [
							{
								'v': true ,'n': true}
							,
							{
								'v': false ,'n': false}
						]}
					,
					{
						v: 'test quotes', n: '测试属性不加引号', s: [
							{
								v: 'quotes', n: '引号'}
						]}
					,
					{
						v: 'test other', n: '测试奇怪的值', s: [
							{
								v: '[]', n: '数组（空）'}
							,
							{
								v: [1,2,3], n: '数组（数值）'}
							,
							{
								v: ['a','b','c'], n: '数组（文字）'}
							,
							{
								v: new Date(), n: '日期'}
							,
							{
								v: new RegExp('\\d+'), n: '正则对象'}
							,
							{
								v: /\d+/, n: '正则直接量'}
							,
							{
								v: {
								}
								, n: '对象'}
							,
							{
								v: document.getElementById('custom_data'), n: 'DOM'}
							,
							{
								v: null, n: 'Null'}
							,
							{
								n: '未设置 value'}
						]}
					,
					{
						'v': '' , 'n': '无子级'}
				]
			}
									  );
		</script>
	</body>
</html>

​x
 
<!DOCTYPE html>
<html>
    <head>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
        <script type="text/javascript" src="https://ku.shouce.ren/libs/jquery/1/jquery1.7.2.min.js">
        </script>   
        <script type="text/javascript" src="//ku.shouce.ren/libs/cxselect/1.3/js/jquery.cxselect.min.js">
        </script>
    </head>
    <body>
        <div class="main">
            <div class="inwrap">
                <h1>jQuery cxSelect 联动下拉菜单
                </h1>
                <h2>自定义选项
                </h2>
                <div class="example">
                    <fieldset id="custom_data">
                        <legend>支持各种类型的数据
                        </legend>
                        <div class="form">
                            <dl class="row">