How does js achieve four-level form linkage?

topic description

there are four select,: building number, unit, floor and room number. The requirements are as follows:
A building, regardless of unit is empty, a total of 30 floors, room number to 1-20
B building, divided into 1, 2 units, 33 floors, room number to 1-6

sources of topics and their own ideas

comes from the actual development requirements, my own idea is to use jQuery to control the addition and deletion of dom nodes.

related codes

/ / here is the key html code I implemented

<div class="house">
    <div class="dong">
        <select id="dong">
            <option selected="selected" disabled="disabled" style="display: none"></option>
            <option>A</option>
            <option>B</option>
        </select>
        <span></span>
    </div>
    <div class="danyuan">
        <select id="danyuan">
            <option selected="selected" disabled="disabled" style="display: none"></option>
            <option>1</option>
            <option>2</option>
        </select>
        <span></span>
    </div>
    <div class="louceng">
        <select id="louceng">
            <!-- <option selected="selected" disabled="disabled" style="display: none"></option> -->
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
            <option>11</option>
            <option>12</option>
            <option>13</option>
            <option>14</option>
            <option>15</option>
            <option>16</option>
            <option>17</option>
            <option>18</option>
            <option>19</option>
            <option>20</option>
            <option>21</option>
            <option>22</option>
            <option>23</option>
            <option>24</option>
            <option>25</option>
            <option>26</option>
            <option>27</option>
            <option>28</option>
            <option>29</option>
            <option>30</option>
            <option class="na">31</option>
            <option class="na">32</option>
            <option class="na">33</option>
        </select>
        <span></span>
    </div>
    <div class="fanghao">
        <select id="fanghao">
            <!-- <option selected="selected" disabled="disabled" style="display: none"></option> -->
            <option class="b">1</option>
            <option class="b">2</option>
            <option class="b">3</option>
            <option class="b">4</option>
            <option class="b">5</option>
            <option class="b">6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
            <option>11</option>
            <option>12</option>
            <option>13</option>
            <option>14</option>
            <option>15</option>
            <option>16</option>
            <option>17</option>
            <option>18</option>
            <option>19</option>
            <option>20</option>
        </select>
        <span></span>
    </div>
</div>

/ / key js code

// 
$("-sharpdanyuan option").hide()
var na = `<option class="na">31</option>
        <option class="na">32</option>
        <option class="na">33</option>`;
var nb = $("-sharpfanghao option:not(".b")").html()
$("-sharplouceng")[0].selectedIndex = -1;
$("-sharpfanghao")[0].selectedIndex = -1;
$("-sharpdong").change(function () {
    if ($("-sharpdong").val() == "A") {
        $("-sharpdanyuan")[0].disabled = true;
        $("-sharpdanyuan").css("background", "gray")
        // iOS
        $("-sharplouceng .na").remove()
        // $("-sharpfanghao option:not(".b")").remove()
        $("-sharpfanghao").append(nb)
        $("-sharplouceng")[0].selectedIndex = -1;
        $("-sharpfanghao")[0].selectedIndex = -1;
        $("-sharpdanyuan option").hide()
        $("-sharpdanyuan").val("")
    } else {
        $("-sharpdanyuan")[0].disabled = false;
        $("-sharpdanyuan").css("background", "-sharpfff")
        // iOS
        $("-sharplouceng").append(na)
        $("-sharpfanghao option:not(".b")").remove()
        $("-sharplouceng")[0].selectedIndex = -1;
        $("-sharpfanghao")[0].selectedIndex = -1;
        $("-sharpdanyuan option").show()
    }
})

what result do you expect? What is the error message actually seen?

the iOS version of Wechat has a pit and cannot set option to display:none. So I had to add and delete DOM by adding class names.
after the contents of this form are all my handwritten tags, I want to be able to implement them with a json configuration. Just tried the plug-in cxSelect, found that it is not easy to use, I would like to ask if there is a better way to achieve ideas and solutions?