Change options in select box when click option in another box

Question

I'm new to JavaScript and I want to change select options when click another select options. So I already searched on google, of the answers i found, this one is the most similar what i want do. ( Change options in select box )
jsfiddle using this answer : https://jsfiddle.net/p86jcL0s/

HTML

<form method="post">
<div class="form-row">

  <div class="form-group col-md-6">
    <label for="BigCategory">Asia</label>
    <select id="BigCategory" class="form-control" onchange="changeBcate(this.value);">
      <option>All</option>
      <option value="100">East Asia</option>
      <option value="200">South-East Aisa</option>
    </select>
  </div>

  <div class="form-group col-md-6">
    <label for="MiddleCategory">Country</label>
    <select id="MiddleCategory" class="form-control" onchange="changeMcate(this.value);">
      <option>All</option>
      <option value="110">Korea</option>
      <option value="120">China</option>
      <option value="130">Japan</option>
      <option value="140">Mongloia</option>
      <option value="210">Vietnam</option>
      <option value="220">Thailand</option>
      <option value="230">Cambodia</option>
      <option value="240">Indonesia</option>
    </select>
  </div>

  <div class="form-group col-md-6">
    <label for="SmallCategory">region</label>
    <select id="SmallCategory" class="form-control">
      <option selected>All</option>
      <option value="111">Seoul</option>
      <option value="112">Busan</option>
      <option value="113">Gwangju</option>
      <option value="121">Beijing</option>
      <option value="122">Sanghai</option>
      <option value="131">Tokyo</option>
      <option value="132">Osaka</option>
      <option value="141">vlaanbaatar</option>
      <option value="142">Arkhangai</option>
      <option value="211">Hanoi</option>
      <option value="212">hochimin</option>
      <option value="222">Bangkok</option>
      <option value="222">Chiangmai</option>
      <option value="231">Phnompen</option>
      <option value="241">Jakarta</option>
      <option value="242">Bali</option>
    </select>
  </div>
</div>
</form>

JS

var EastAsia=['Korea','China','Japan','Mongolia']
var EastSouthAsia=['Vietnam','Thailand','Cambodia','Indonesia']
var Korea=['Seoul','Busan','Gwangju']
var China=['Beijing','Sanghai']
var Japan=['Tokyo','Osaka']
var Mongolia=['ulaanbaatar','Arkhangai']
var Vietnam=['Hanoi','hochimin']
var Thailand=['Bangkok','Chiangmai']
var Cambodia=['Phnompen']
var Indonesia=['Jakarta','Bali']

/* function changeBcate(obj) {
  if (obj==100)  {
    // change Middle category option 110~140

  }
}

function changeMcate(obj) {
}
 */
$('#BigCategory').change(function(){
    //clear values
    $('#MiddleCategory').html('');

    //find which list to use
    var list = [];
    switch($(this).val()){
        case "100":
            list = EastAsia;
            break;
        case "200":
            list = EastSouthAsia;
            break;
    }

    //populate dropdown
    $.each(list, function(index, value){
        $('#MiddleCategory').append("<option>"+value+"</option>");
    });
});

$('#MiddleCategory').change(function(){
    //clear values
    $('#SmallCategory').html('');

    //find which list to use
    var list = [];
    switch($(this).val()){
        case "110":
            list = Korea;
            break;
        case "120":
            list = China;
            break;
        case "130":
            list = Japan;
            break;
        case "140":
            list = Mongolia;
            break;    
        case "210":
            list = Vietnam;
            break;    
        case "220":
            list = Thailand;
            break;    
        case "230":
            list = Cambodia;
            break;    
        case "240":
            list = Indonesia;
            break;  

    }

    $.each(list, function(index, value){
        $('#SmallCateogory').append("<option>"+value+"</option>");
    });
});

But i want to give 'All' in second and third box and people can see only 'All' before they click first box. (Also, the above answer doesn't work when i click second select box.)

More explain, first select box is Asia, second box is country and third box is region. All select boxes default value is 'All', and only user can see 'All' from second and third box before they click First Box option. So if people click option in first box, then they can see second box options (user can't see third box options yet. they can see only 'All' from third box), and if people click option in second select box, then they can see options in third box.

example below.
![example][ https://imgur.com/OqoSZSO ]

Thanks for your help.

Answer 1

Why just check if the variable list is empty then if it is empty just append <option>All</option> By doing this it will change the middle and small category selectbox ah All option if the the Big category select the All option.

$('#BigCategory').change(function(){
  //clear values
  $('#MiddleCategory').html('');

  //find which list to use
  var list = [];
  switch($(this).val()){
    case "100":
        list = EastAsia;
        break;
    case "200":
        list = EastSouthAsia;
        break;
  }

  //populate dropdown
  if(list.length == 0){
     $('#MiddleCategory').append("<option>All</option>");
     $('#SmallCateogory').append("<option>All</option>");
  }else{
      $.each(list, function(index, value){
        $('#MiddleCategory').append("<option>"+value+"</option>");
      });

     $('#SmallCateogory').append("<option>All</option>");
  }

});

$('#MiddleCategory').change(function(){
  //clear values
  $('#SmallCategory').html('');

  //find which list to use
  var list = [];
  switch($(this).val()){
    case "110":
        list = Korea;
        break;
    case "120":
        list = China;
        break;
    case "130":
        list = Japan;
        break;
    case "140":
        list = Mongolia;
        break;    
    case "210":
        list = Vietnam;
        break;    
    case "220":
        list = Thailand;
        break;    
    case "230":
        list = Cambodia;
        break;    
    case "240":
        list = Indonesia;
        break;  

  }

  if(list.length == 0){
     $('#SmallCateogory').append("<option>All</option>");
  }else{
    $.each(list, function(index, value){
      $('#SmallCateogory').append("<option>"+value+"</option>");
    });
  }
});

Hope it will help!

Answer 2

I solved it ( https://epthffh.tistory.com/entry/javascript-셀렉트박스SelectBox-바로실행 ) JS fiddle : https://jsfiddle.net/qbt394z2/

<select onchange="categoryChange(this)">
  <option>전체</option>
  <option value="a">블랙핑크</option>
  <option value="b">에프엑스</option>
  <option value="c">EXID</option>
</select>

<select id="good">
<option>좋아하는 멤버를 선택해주세요</option>
</select>

<script>
function categoryChange(e) {
  var good_a = ["지수", "제니", "로제", "리사"];
  var good_b = ["빅토리아", "엠버", "루나", "크리스탈"];
  var good_c = ["LE", "하니", "정화", "혜린", "솔지"];
  var target = document.getElementById("good");

  if(e.value == "a") var d = good_a;
  else if(e.value == "b") var d = good_b;
  else if(e.value == "c") var d = good_c;

  target.options.length = 0;

  for (x in d) {
    var opt = document.createElement("option");
    opt.value = d[x];
    opt.innerHTML = d[x];
    target.appendChild(opt);
  } 
}
</script>

and for third select box, just make one more function.