JavaScriptでselect要素を変化させる方法

Question

質問：「好きなもの」（第2セレクトボックス）の選択肢の数がフルーツとケーキで違う場合、どのような方法で実現すればよいのでしょうか。教えてください。

セレクトボックスの作成について、以下のコードで「デザート」セレクトの選択によって、「好きなもの」のセレクトボックスの選択肢が変化する、というのを実現しました。
しかし、これは第2セレクトボックスの選択肢が同数の場合です。

<form name="selbox">
    <p>デザート</p>
    <select name="dessert" onChange="set()">　//第1セレクトボックス
      <option value="">選択してください</option>
      <option value="">フルーツ</option>
      <option value="">ケーキ</option>
    </select>
    
    <p>好きなもの</p>
    <select name="favorite" require>　//第2セレクトボックス
      <option value="">選択してください</option>
      <option value=""></option>
      <option value=""></option>
      <option value=""></option>
    </select>
    </form>

var favorite_fruit =['','オレンジ','りんご','メロン'];
var favorite_cake =['','ショートケーキ','チョコレートケーキ','チーズケーキ'];

function set() {

  for(i=1; i<4; i++) {

    switch(document.selbox.dessert.selectedIndex) {
      case 0:
          document.selbox.favorite.options[i].text='';
      break;
      case 1:
          document.selbox.favorite.options[i].text=favorite_fruit [i];
      break;
      case 2:
          document.selbox.favorite.options[i].text=favorite_cake [i];
      break;
    }
  }
  document.selbox.favorite.selectedIndex()=0;
}

もし、例えばケーキを選択した場合の第2セレクトボックスの選択肢が以下だった場合

var favorite_cake =['','ショートケーキ','チョコレートケーキ','チーズケーキ','ティラミス'];

どのようにすれば、第2セレクトボックスに選択肢を４つ入れられるのでしょうか。

for文の「i < 4」にif分を入れて場合分けしたりしましたが、うまくいきませんでした。

ご回答願います。

Comments

[m.ts10806]

<option>は必ず空で置いていないといけない前提でしょうか。

[退会済みユーザー]

空でなくても大丈夫です！！

Answer 1

select 要素を再生成し、.replaceChild() で置き換えます。

var favorites = [
  [],
  [['オレンジ', ''], ['りんご', ''], ['メロン', '']],
  [['ショートケーキ', ''], ['チョコレートケーキ', ''], ['チーズケーキ', ''], ['ティラミス', '']]
];

function set() {
  var form = document.forms['selbox'];
  var favorite = favorites[form.elements['dessert'].selectedIndex];
  var original = form.elements['favorite'];
  var select = original.cloneNode(false);
  select.add(original.options[0].cloneNode(true));
  for (var i = 0; i < favorite.length; i++) {
    select.add(new Option(favorite[i][0], favorite[i][1]));
  }

  select.selectedIndex = select.length > original.selectedIndex ? original.selectedIndex : 0;
  original.parentNode.replaceChild(select, original);
}

https://developer.mozilla.org/ja/docs/Web/API/Node/replaceChild

Comments

[退会済みユーザー]

実現できました！
.replaceChild() で置き換えるんですね。
大変勉強になりました、ありがとうございます。

お二方に回答いただき、私にとってはどちらもベストアンサーでしたが、先に回答いただいた方をベストアンサーとさせていただきました。ご容赦ください。

Answer 2

「選択したものから更に選択したい」となると単なる変数で持つよりオブジェクトで持ったほうが良いと思います。
で、それぞれの配列を紐づけられるようなoptionのvalueを指定して、
リストを作る（あと毎回初期化する）

<!-- thisを引数に追加 -->
<!-- valueを追加 -->
    <select name="dessert" onChange="set(this)">
      <option value="">選択してください</option>
      <option value="fruit">フルーツ</option>
      <option value="cake">ケーキ</option>
    </select>

<!-- 空にする -->
    <select name="favorite" require></select>

let favorite = {};
favorite.fruit =['','オレンジ','りんご','メロン'];
favorite.cake = ['','ショートケーキ','チョコレートケーキ','チーズケーキ'];

function set(elem) {
	//favoriteを初期化
	let fav = document.querySelector("select[name='favorite']");
	let favop = fav.options;
	let favoplen = fav.options.length;
	for (let i = favoplen-1; i >= 0; i--) {
		fav.removeChild( favop.item( i ) );
	}
	//未選択時はなし
	if(elem.value == ""){
		return;
	}
	if(elem.value in favorite){
		//リストを作成
		for (let i = 0; i < favorite[elem.value].length; i++) {
			let op = document.createElement('option');
			if(i==0){
				op.value = '';
				op.textContent = '選択してください';
			}else{
				op.value = i;
				op.textContent = favorite[elem.value][i];
			}
			fav.appendChild(op);
		}
	}
}

Comments

[m.ts10806]

できればfavoriteのvalueもdessertのvalueみたいな持ち方したほうがいいかなとは思いました。
この2つのselectをこの後どうしたいかで決めてください。

[退会済みユーザー]

実現できました！
ありがとうございます。
重ねて質問で申し訳ないのですが、
for (let i = favoplen-1; i >= 0; i--) {
fav.removeChild( favop.item( i ) );
}
の部分で何をしているのかが、よく理解できません。
ご教授願います。