網上找了一些大家提供的js，不太滿意，主要原因是和我拿到手的json格式出入很大，導致改起來很麻煩，於是自己寫了點

先上效果圖，因為工程原有，帶有其他樣式外掛，不好搬過來，所以這裡自己簡單畫了點樣式。

我處理過後的json資料如下：

{
    "spec_keys": [
        "顏色",
        "款式"
    ],
    "spec_kv": {
        "顏色": [
            "白色",
            "黑色",
            "橙色"
        ],
        "款式": [
            "豪華版",
            "標準版"
        ]
    },
    "spec_infos": [
        {
            "spec_info": "@
 
[email protected]黑色@[email protected]標準版@[email protected]",
            "sku_id": 111
        },
        {
            "spec_info": "@[email protected]黑色@[email protected]豪華版@[email protected]",
            "sku_id": 112
        },
        {
            "spec_info": "@[email protected]
 
白色@[email protected]標準版@[email protected]",
            "sku_id": 113
        },
        {
            "spec_info": "@[email protected]白色@[email protected]豪華版@[email protected]",
            "sku_id": 114
        },
        {
            "spec_info": "@[email protected]橙色@[email protected]
 
標準版@[email protected]",
            "sku_id": 115
        }
    ]
}

html程式碼就比較簡單了

<label class="control-label">規格</label>
			<div class="spec-div"></div>
			<div  class="form-control">
										<span class="input-group-addon sku-name">隨機</span>
										<span class="input-group-addon sku-name-lable">X</span>
										<span class="input-group-addon sku-count-btn" id="task-count-sub">-</span>
										<input type="text" id="taskCount" name="taskCount" value="0">
										<span class="input-group-addon sku-count-btn" id="task-count-add">+</span>
			</div>

js程式碼如下：

/** ******************************sku********************************************* */
var skuInfos;
var skuKeys;
$(function() {
	search_sku();
	$(".spec-div").delegate(".spec-uncheck", "click", function() {
		if(!$(this).hasClass('spec-invalid')){
		$(this).siblings(".spec-btn").removeClass('spec-check');
		$(this).siblings(".spec-btn").addClass('spec-uncheck');
		$(this).addClass('spec-check');
		$(this).removeClass('spec-uncheck');
		spec_invalid($(this));
		sku_confirm();
		}
	});

	$(".spec-div").delegate(".spec-check", "click", function() {
		if(!$(this).hasClass('spec-invalid')){
		$(this).addClass('spec-uncheck');
		$(this).removeClass('spec-check');
		spec_invalid_exit($(this));
		$(".sku-name").text("隨機");
		}
	});

	$("#task-count-sub").on('click', function() {
		var intnum = $("#taskCount").val();
		if (intnum == 0) {
			return false;
		} else {
			intnum = parseInt(intnum) - 1;
		}
		$("#taskCount").val(intnum);
	});

	$("#task-count-add").on('click', function() {
		var intnum = $("#taskCount").val();
		intnum = parseInt(intnum) + 1;
		$("#taskCount").val(intnum);
	});
	

	$(".content").delegate(".task-export", "click", function() {
		$(this).removeClass('green-span');
		$(this).addClass('white-span');
		$(this).find("i").removeClass('white');
		$(this).find("i").addClass('black');
	});
})

function search_sku() {
	$("#search-sku").off('click');
	$("#search-sku").addClass('invalid-btn');
	$("#reset-sku").removeClass('invalid-btn');
	$("#taskTargetId").attr("readonly", "readonly");
	$("#reset-sku").off('click');
	$("#reset-sku").on('click', function() {
		reset_sku();
	});
	$
			.ajax({ // 使用jquery-form提交資料
				type : 'POST',
				dataType : "json",
				url : "sku.json",
				async : true,
				success : function(data) {
					if (data.result == -100) {
						return false;
					} else {
						skuInfos = data.spec_infos;
						skuKeys = data.spec_keys;
						if (data.spec_keys.length == 0) {
							$("#taskSkuid").val(data.spec_infos[0].sku_id);
							$(".sku-name").text("無");
						} else {
							var skuhtml = "";
							for (var i = 0; i < data.spec_keys.length; i++) {
								skuhtml = skuhtml
										+ "<div class=\"spec-key-lable form-control\">"
										+ data.spec_keys[i] + "</div>";
								console.log(data.spec_kv[data.spec_keys[i]]);
								skuhtml = skuhtml
										+ "<div class=\"spec-value-lable form-control\">";
								for (var k = 0; k < data.spec_kv[data.spec_keys[i]].length; k++) {
									skuhtml = skuhtml
											+ "<span class=\"input-group-addon spec-btn spec-uncheck\">"
											+ data.spec_kv[data.spec_keys[i]][k]
											+ "</span>";
								}
								skuhtml = skuhtml + "</div>";
							}
							$(".spec-div").append(skuhtml);
						}
						$(".task-info").show();
					}
				},
				error : function() {
				}
			});

}

function spec_invalid(specObj) {
	var btns = new Array();
	specObj.parent().siblings(".spec-value-lable").children(".spec-btn").each(
			function(key, value) {
				btns[key] = $(this).text();
				$(this).addClass('spec-invalid');
				$(this).removeClass('spec-uncheck');
				for (var i = 0; i < skuInfos.length; i++) {
					if (skuInfos[i].spec_info.indexOf("@[email protected]" + specObj.text()
							+ "@[email protected]") >= 0
							&& skuInfos[i].spec_info.indexOf("@[email protected]" + btns[key]
									+ "@[email protected]") >= 0) {
						$(this).removeClass('spec-invalid');
						$(this).addClass('spec-uncheck');
						break;
					}
				}
			});

}

function spec_invalid_exit(specObj) {
	var btns = new Array();
	specObj.parent().siblings(".spec-value-lable").children(".spec-btn").each(
			function(key, value) {
				btns[key] = $(this).text();
				var isSpec = false;
				for (var i = 0; i < skuInfos.length; i++) {
					if (skuInfos[i].spec_info.indexOf("@[email protected]" + specObj.text()
							+ "@[email protected]") >= 0
							&& skuInfos[i].spec_info.indexOf("@[email protected]" + btns[key]
									+ "@[email protected]") >= 0) {
						isSpec = true;
						break;
					}
				}
				if (!isSpec) {
					$(this).removeClass('spec-invalid');
					$(this).addClass('spec-uncheck');
				}
			});
}

function sku_confirm() {
	var skuid = 0;
	var checkSkuInfo = "";
	for (var i = 0; i < skuInfos.length; i++) {
		var btns = new Array();
		checkSkuInfo = "";
		var selectedCount = 0;
		$(".spec-check").each(function(key, value) {
			btns[key] = $(this).text();
			if (skuInfos[i].spec_info.indexOf("@[email protected]" + btns[key] + "@[email protected]") >= 0) {
				selectedCount = selectedCount + 1;
				checkSkuInfo = checkSkuInfo + btns[key] + " ";
			}
		})
		if (selectedCount == skuKeys.length) {
			skuid = skuInfos[i].sku_id;
			break;
		}
	}
	if (selectedCount == skuKeys.length) {
		skuid = skuInfos[i].sku_id;
		console.log("id=" + skuid + " " + checkSkuInfo)
		$(".sku-name").text(checkSkuInfo);
		$("#taskSkuid").val(skuid);
		$("#taskName").val(checkSkuInfo);
	} else {
		$(".sku-name").text("隨機");
		$("#taskSkuid").val(0);
		$("#taskName").val("");
	}
}