使用Java禁用特定选择下拉列表字段时出现问题

Question

我正在开发一个应用程序，在该应用程序中，我有一些具有选择下拉字段的卡。在卡片上，我编写了JavaScript逻辑，如果用户 在任何卡片上选择下拉菜单时选择了妻子或丈夫，则其他任何丈夫或妻子下拉字段均应禁用。

问题是当我从任何卡中选择一个选项时，其他卡都不会禁用。基本上我想当用户在任何卡上选择妻子或丈夫选项时，其他卡上的所有其他丈夫或妻子选项应立即禁用。

我在控制台中收到此错误：

TypeError：document.querySelectorAll（...）。addEventListener不是一个函数

标记代码

<!-- Card 1 -->

<form method="POST" action="#" id="phase3">

        <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">

        <!-- Gender -->

        <div class="row registerRelationph3">

            <label class="fm-input"> Relation :</label>

            <select class="fm-input otherMenu" id="relation1" required>

                <option value="Husband"> Husband </option>

                <option value="Wife"> Wife </option>

                <option value="Son"> Son </option>

                <option value="Daughter"> Daughter </option>

            </select>

        </div>

        <!-- END -->

        <!-- DOb -->

        <div class="row">

        <label class="fm-input" style="font-size: 10px;"> Date Of Birth :</label>

        <input type="text" id="dob" class="fm-inputph3" placeholder="Date of Birth" value="" required>

        </div>

        <!-- END dob -->

            <button class="btn btn-lg" type="submit"> Save Details <i class="fa fa-check-circle" ></i></button>

</form>

<!-- End card 1 -->

<!-- Card 2-->

<form method="POST" action="#" id="phase3">

        <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">

        <!-- Gender -->

        <div class="row registerRelationph3">

            <label class="fm-input otherMenu"> Relation :</label>

            <select class="fm-input" id="relation1" required>

                <option value="Husband"> Husband </option>

                <option value="Wife"> Wife </option>

                <option value="Son"> Son </option>

                <option value="Daughter"> Daughter </option>

            </select>

        </div>

        <!-- END -->

Answer 1

我认为您不能在菜单列表上添加事件监听器，但必须为每个菜单完成var menus = document.querySelectorAll('.otherMenu');for (let menu of menus) {&nbsp; &nbsp; menu.addEventListener('change', function () {&nbsp; &nbsp; &nbsp; &nbsp; var selectedOption = this.value;&nbsp; &nbsp; &nbsp; &nbsp; var selectWife = document.querySelectorAll('.otherMenu option[value="Wife"]');&nbsp; &nbsp; &nbsp; &nbsp; var selectHusband = document.querySelectorAll('.otherMenu option[value="Husband"]');&nbsp; &nbsp; &nbsp; &nbsp; selectWife.forEach(function (option) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; option.disabled = selectedOption === 'Wife';&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; selectHusband.forEach(function (option) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; option.disabled = selectedOption === 'Husband';&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });}