multi-layer select

https://www.ptt.cc/bbs/Web_Design/M.1455544195.A.FFF.html

HTML

A: 
<select id="a">
  <option value="a1">a1</option>
  <option value="a2">a2</option>
  <option value="a3">a3</option>
</select>
<br/>
<br/>
B: 
<select id="b"></select>
<br/>
<br/>
C: 
<select id="c"></select>
<br/>
<br/>
Cost: <span id="cost"></span>
<br/><br/>
Result: A = <span id="resultA"></span>, B = <span id="resultB"></span>, C = <span id="resultC"></span>, Cost = <span id="resultCost"></span>

JavaScript

var a = document.querySelector("#a");
var b = document.querySelector("#b");
var c = document.querySelector("#c");
var cost = document.querySelector("#cost");

function reset() {
  // 將所有 child 刪除重來
	while (b.firstChild)
    b.removeChild(b.firstChild);
	while (c.firstChild)
    c.removeChild(c.firstChild);
  cost.innerHTML = "0";
}

function check() {
	if(a.value === "a1") {
  	var option = document.createElement("option");
		option.text = "b1";
    option.value = "b1";
    b.add(option);
    
    option = document.createElement("option");
    option.text = "c1";
    option.value = "c1";
    c.add(option);
    option = document.createElement("option");
    option.text = "c3";
    option.value = "c3";
    c.add(option);
    
    cost.innerHTML = "100";
  }
  else if(a.value === "a2") {
  	var option = document.createElement("option");
		option.text = "b1";
    option.value = "b1";
    b.add(option);
    option = document.createElement("option");
		option.text = "b2";
    option.value = "b2";
    b.add(option);
    
    option = document.createElement("option");
    option.text = "c1";
    option.value = "c1";
    c.add(option);
    option = document.createElement("option");
    option.text = "c2";
    option.value = "c2";
    c.add(option);
    option = document.createElement("option");
    option.text = "c3";
    option.value = "c3";
    c.add(option);
    
    cost.innerHTML = "200";
  }
}

function showResult() {
	document.querySelector("#resultA").innerHTML = a.value;
  document.querySelector("#resultB").innerHTML = b.value;
  document.querySelector("#resultC").innerHTML = c.value;
  document.querySelector("#resultCost").innerHTML = cost.innerHTML;
}

a.addEventListener("change", function() {
	reset();
  check();
  showResult();
});

b.addEventListener("change", function() {
	showResult();
});

c.addEventListener("change", function() {
	showResult();
});

check();
showResult();