jqueryで配列から特定の要素を除いてunwrapしたい

Question

お世話になっております。
当方Laravel5.5にてWebSiteを構築しております、
環境はWindows、ブラウザはIEです。

背景

あるセレクトボックスの内容に基づいて、
別のセレクトボックスのoption要素を表示・非表示させる仕組みを作っています。
（あるセレクトボックスで関東を選択すると、別のセレクトボックスで、
岩手などは他地域が非表示になり、千葉や東京が表示されるイメージです。
本件ではわかりやすいように地域のセレクトボックスと
県のセレクトボックスを扱っているものとしてご質問します）

IE Chrome Edge全てに対応したいので、
hiddenのtrue/falseではなく、<span class="wrap">
の着脱で表示非表示をコントロールしようとしています。
（もともとはhiddenでコントロールしていましたが、
只今改修を行っています）

また、当初、テンプレートを使用して上記仕組みを構築しましたので、
（初心者のため元からある部分を改変することは避けたいので）
今取得できている変数が下記の条件である、という下で実装したいです。

<取得できているもの>
・全（表示にすべき要素も非表示にすべき要素も含めた）
option要素の配列(「belongers」と名称をつけています、
中身は
0: option.~
1: option.~
2: option.~
・・・
といった形です)
・非表示にすべきoption要素の配列(「nonbelongers」と名称をつけています、
中身は上記と同じくoptionの羅列です)

なお、hiddenで表示をコントロールしていた際は、

belongers.prop('hidden', null)
nonbelongers.prop('hidden', true)

で対応していました。

やりたいこと

belongersとnonbelongersを使って、下記２つを
実現するロジックを組みたいです。

①option要素の親要素にwrapがある場合かつ
表示対象（belongersとnonbelongersの差分にあたる）
である場合は、unwrapする
②option要素の親要素にwrapがない場合かつ
nonbelongersである場合は、wrapをかける

現状

下記の通りですが、1回目の地域の指定はうまくいきますが、
1回目の地域の指定の後別の地域に変更（地域のセレクトボックスをクリック）した場合、
bwrapには、親要素がwrapのものとunwrapのものがまざるため、
まとめてunwrapしてしまうと、余計な要素が削除されてしまうのが課題です。

const bwrap = belongers.parents().attr("class")
const nbwrap = nonbelongers.parents().attr("class")

if(bwrap == "wrap")
{
belongers.unwrap();
}
if(nbwrap !== "wrap")
{
nonbelongers.wrap("<span class='wrap'>");
}

参考にしているもの

https://qiita.com/bubbles/items/cdf9e8431f67d01f7cf8
こちらを参考に実装していますが、
こちらの記載はoption要素一つ一つに対してwrapの指定をしているのに対して、
私の場合は配列に対してwrapの指定をかけるので、
2回目以降にwrapしたりunwrapする場合に、
配列の中wrapされたものとunwrapなものが混在し、
正しい処理ができません。　
(unwrapなoption要素が１つでも混じっている
状態で配列にunwrapをかけると、本来消してはいけない
親要素が消えてしまいます)

jQueryに関して全くの初心者のため、
文字による説明が多くなってしまい大変恐縮なのですが
（ブラウザの開発者ツールに出力されたoption要素などは1つの要素の中に大量に
項目があり、どこからどこまでを転載すればよいのか判断がつかず、
文字のほうがわかりやすいと判断しております）、
宜しくお願い致します。

Answer 1

yambejp さんの指摘の通り、

<span class="wrap">の着脱で表示非表示をコントロールしよう

というのが誤りです。Qiita は個人が書くものなのでうのみにしないようにしましょう。
ここでの方針は select 要素の再生成です。
簡単な例(optionのみ入れ替え)。

const belongers = $('[name="pref"] option').clone(false);

$(document).on('change', '[name="area"]', function(event) {
  const options = belongers.filter('[data-area="' + this.value + '"]').clone(false);
  $('[name="pref"]').empty().append(options);
});

Answer 2

質問の状況が把握できていませんが
セレクトボックスはdom的にoptionもしくはoptgroup以外子要素を持ていないのでは？

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  console.log(document.querySelector('#s1').innerHTML)
});
</script>
<select id="s1">
<option value="1">1</option>
<span class="wrap">
<option value="2">2</option>
<option value="3">3</option>
</span>
<option value="4">4</option>
<optgroup label="test">
<option value="5">5</option>
<option value="6">6</option>
</optgroup>
<option value="7">7</option>
</select>

Comments

[gobindar]

yambejp様
ご回答ありがとうございます。
申し訳ありません、当方初心者でご回答の意味が理解しきれない部分があるのですが、

セレクトボックスの子要素にwrapをもたせることで、表示される選択肢から外したいという意図があります。
動作の順序としては、
1.セレクトボックス①（地域のセレクトボックス）で地域を選択
2.セレクトボックス②（県のセレクトボックス）のoptionを表示するためのjqueryが動き、
belongersのwrapを外し、nonbelongersにwrap（<span class="wrap"> ~ </span>）をかける
3.セレクトボックス②にて、①にて選択した地域の県が表示される

上記2番ができず困っています。
最終的に出力したいセレクトボックス②のHTML文としては、
ご回答の内容を使って表すと、下記の通りです。
（この場合、belongersがoption1~7、nonbelongersが4~7にあたり、
optgroupは使っていません。）

<select id="s1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<span class="wrap">
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</span>
</select>

[yambejp]

うまく理解してもらえてないようなので繰り返しになりますが
セレクトボックスの直下にspanは"置けません"
つまりその方法では「命題の目的を達成できません」ということです。
私のサンプルをコピペすればspanがブラウザによって消されていることがわかりせんか？

[gobindar]

ご返答ありがとうございます。
意味を理解できず失礼いたしました。
確かに、ご教示のサンプルで再現したところ、
出力結果からspanが消えているのですが、
質問文記載の
「参考にしているもの」の
https://qiita.com/bubbles/items/cdf9e8431f67d01f7cf8
のように、jsでwrapする内容を指定して
（$(this).wrap("<span class='wrap'>");として）
要素を付加すると、出力結果にspanが残ります。
一度jsで試していただけないでしょうか？

--20190910.以下追記--
下記のコードでwrapがoptionに追加できます。

<script>
$(function(){
$('select#select1 option[value="1"]').wrap("<span class='wrap'>");
});
</script>

<select id="select1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<optgroup label="test">
<option value="5">5</option>
<option value="6">6</option>
</optgroup>
<option value="7">7</option>
</select>