js如何实现四级表单联动？

Question

题目描述

有四个select，分别是栋数、单元、楼层和房号，要求如下：
A栋，不分单元为空，一共30层，房号到1-20
B栋，分1、2单元，33层，房号到1-6

题目来源及自己的思路

来源于实际开发需求，我自己的思路是用jQuery控制dom节点的增删。

相关代码

// 下面是我实现的关键html代码

<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>

// 关键js代码

// 房间信息
$("#danyuan option").hide()
var na = `<option class="na">31</option>
        <option class="na">32</option>
        <option class="na">33</option>`;
var nb = $("#fanghao option:not('.b')").html()
$("#louceng")[0].selectedIndex = -1;
$("#fanghao")[0].selectedIndex = -1;
$("#dong").change(function () {
    if ($("#dong").val() == "A") {
        $("#danyuan")[0].disabled = true;
        $("#danyuan").css("background", "gray")
        // 兼容iOS楼层和房号
        $("#louceng .na").remove()
        // $("#fanghao option:not('.b')").remove()
        $("#fanghao").append(nb)
        $("#louceng")[0].selectedIndex = -1;
        $("#fanghao")[0].selectedIndex = -1;
        $("#danyuan option").hide()
        $("#danyuan").val("")
    } else {
        $("#danyuan")[0].disabled = false;
        $("#danyuan").css("background", "#fff")
        // 兼容iOS楼层和房号
        $("#louceng").append(na)
        $("#fanghao option:not('.b')").remove()
        $("#louceng")[0].selectedIndex = -1;
        $("#fanghao")[0].selectedIndex = -1;
        $("#danyuan option").show()
    }
})

你期待的结果是什么？实际看到的错误信息又是什么？

iOS版本的微信有个坑，不能设置option为display:none。于是我不得不采用加类名增删DOM的操作。
这个表单的内容都是我手写标签后，我希望能够实现用一个json配置来实现。刚刚试过cxSelect这个插件，发现不怎么好用，请问有更好的实现思路和解决方案吗？

Answer 1

针对题主在最后所说的iOS版本的微信有个坑，不能设置option为display:none。于是我不得不采用加类名增删DOM的操作。问题我提供一个解决办法：不增删DOM，而是利用设置宽高的方式，例如我想隐藏一个元素，设置其宽高为0，这个设置的方式可以通过直接设置行内样式或者增删class，这都是可以的

Answer 2

$("#louceng .na").hide(function () {
    $(this).width(0)
    $(this).height(0)
})

我试了一下还是不行呢，而且这样耦合性就高了，如果select的宽高变化了，需要改动三处。