js如何實(shí)現(xiàn)四級表單聯(lián)動？

題目描述

有四個select，分別是棟數(shù)、單元、樓層和房號，要求如下：
A棟，不分單元為空，一共30層，房號到1-20
B棟，分1、2單元，33層，房號到1-6

題目來源及自己的思路

來源于實(shí)際開發(fā)需求，我自己的思路是用jQuery控制dom節(jié)點(diǎn)的增刪。

相關(guān)代碼

// 下面是我實(shí)現(xiàn)的關(guān)鍵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>

// 關(guān)鍵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()
    }
})

你期待的結(jié)果是什么？實(shí)際看到的錯誤信息又是什么？

iOS版本的微信有個坑，不能設(shè)置option為display:none。于是我不得不采用加類名增刪DOM的操作。
這個表單的內(nèi)容都是我手寫標(biāo)簽后，我希望能夠?qū)崿F(xiàn)用一個json配置來實(shí)現(xiàn)。剛剛試過cxSelect這個插件，發(fā)現(xiàn)不怎么好用，請問有更好的實(shí)現(xiàn)思路和解決方案嗎？