Question

js遍历json根据id选择属性值显示对应的div？

有3个json，它们之间可以找到相同的id，我想要的是选择了属性1下面的属性值，然后再选择属性2下面的属性值（属性1是必有的，但是属性2可能有的情况下没有），请问我该怎么写js可以实现？
//属性1
var arr1 = {
"attributes": {
"1": {
"id": "1",
"options": [{
"id": "2",
"products": ["4", "5"]
}, {
"id": "3",
"label": "0.05Ohm",
"price": "3",
"oldPrice": "3",
"products": ["6"]
}]
},
"7": {
"id": "7",
"options": [{
"id": "8",
"products": ["4"]
}, {
"id": "9",
"products": ["10"]
}]
}
},
"template": "price",
}
//属性2
var arr2 = {
"7":{
"8":[
"4"
],
"9":[
"10"
]
},
"1":{
"2":[
"4",
"5"
],
"3":[
"6"
]
}
}
//仓库
var arr3={
"4":{
"qty":"5",
"html":"Warehouse1”
},
"5":{
"qty":"6",
"html":"Warehouse2"
},
"6":{
"qty":"22",
"html":"Warehouse3"
},
"10":{
"qty":"13",
"html":"Warehouse4"
}
}
<dl> <dt> <label>属性1</label> </dt> <dd> <select name="super_attribute[1]" id="attribute1"> <option value="">Choose an Option...</option> <option value="2">0.04Ohm</option> <option value="3">0.05Ohm</option> </select> </dd> <dt> <label>属性2</label> </dt> <dd> <select name="super_attribute[7]" id="attribute7"> <option value="">Choose an Option...</option> <option value="8">Black</option> <option value="9">Red</option> </select> </dd> <dt> <label>Warehouse</label> </dt> <dd> <!--根据上面选择的属性值显示对应的仓库内容--> </dd> </dl>

Answer 1

<dl>
	<dt>
		<label>属性1</label>
	</dt>
	<dd>
		<select name="super_attribute[1]" id="attribute1">
			<option value="">Choose an Option...</option>
			<option value="2">0.04Ohm</option>
			<option value="3">0.05Ohm</option>
		</select>
	</dd>
	<dt>
		<label>属性2</label>
	</dt>
	<dd>
		<select name="super_attribute[7]" id="attribute7">
			<option value="">Choose an Option...</option>
			<option value="8">Black</option>
			<option value="9">Red</option>
		</select>
	</dd>
	<dt>
		<label>Warehouse</label>
	</dt>
	<dd>
		<div id="Warehouse"></div>
	</dd>
</dl>

<script>
var arr1 = {
	"attributes": {
		"1": {
			"id": "1",
			"options": [{
				"id": "2",
				"products": ["4", "5"]
			}, {
				"id": "3",
				"label": "0.05Ohm",
				"price": "3",
				"oldPrice": "3",
				"products": ["6"]
			}]
		},
		"7": {
			"id": "7",
			"options": [{
				"id": "8",
				"products": ["4"]
			}, {
				"id": "9",
				"products": ["10"]
			}]
		}
	},
	"template": "price"
};
var arr2 = {
	"7": {
		"8": [
			"4"
		],
		"9": [
			"10"
		]
	},
	"1": {
		"2": [
			"4",
			"5"
		],
		"3": [
			"6"
		]
	}
};
var arr3 = {
	"4": {
		"qty": "5",
		"html": "Warehouse1"
	},
	"5": {
		"qty": "6",
		"html": "Warehouse2"
	},
	"6": {
		"qty": "22",
		"html": "Warehouse3"
	},
	"10": {
		"qty": "13",
		"html": "Warehouse4"
	}
};

window.onload=function(){
   attribute1.onchange=attribute7.onchange=function(){
      var v=this.value;
      if(v){
         Object.keys(arr2).forEach(function(e){
            Object.keys(arr2[e]).forEach(function(ee){
               if(v==ee){
                  arr2[e][ee].forEach(function(eee){
                     Warehouse.innerHTML+="<div>"+arr3[eee].qty+" "+arr3[eee].html+"</div>";
                  });
               }
            });
         });
      }
   }
}
</script>

Answer 2

为什么头很晕啊？