使用Javascript从选择下拉列表中禁用某些选项字段的问题

Question

我正在开发一个应用程序，在该应用程序中，我有一些具有选择下拉字段的卡。在Cards上，我编写了JavaScript逻辑，如果用户在第一个Card select下拉菜单中选择了妻子作为选项，则第二个下拉的妻子字段将被禁用，这很好。

问题出在第三张卡上，它没有被禁用。基本上我想当用户在第一张卡上选择妻子选项时，应立即禁用其他卡上的所有其他妻子选项

标记代码

<!-- 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 firstMenu" 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>

Answer 1

有两件事是错误的：您的otherMenu课程已在上，<label>而不是<select>第二张卡上您需要使用querySelectorAll()和迭代元素集合。querySelector()只会选择第一个匹配元素。document.querySelector('.firstMenu').addEventListener('change', function() {&nbsp; var selectedOption = this.value;&nbsp; var otherSelectOptions = document.querySelectorAll('.otherMenu option');&nbsp; otherSelectOptions.forEach(function(option) {&nbsp; &nbsp; option.disabled = option.value === selectedOption;&nbsp; });});<!-- Card 1 --><form method="POST" action="#" id="phase3">&nbsp; <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">&nbsp; <!-- Gender -->&nbsp; <div class="row registerRelationph3">&nbsp; &nbsp; <label class="fm-input"> Relation :</label>&nbsp; &nbsp; <select class="fm-input firstMenu" id="relation1" required>&nbsp; &nbsp; &nbsp; <option value="Husband"> Husband </option>&nbsp; &nbsp; &nbsp; <option value="Wife"> Wife </option>&nbsp; &nbsp; &nbsp; <option value="Son"> Son </option>&nbsp; &nbsp; &nbsp; <option value="Daughter"> Daughter </option>&nbsp; &nbsp; </select>&nbsp; </div>&nbsp; <!-- END -->&nbsp; <!-- DOb -->&nbsp; <div class="row">&nbsp; &nbsp; <label class="fm-input" style="font-size: 10px;"> Date Of Birth :</label>&nbsp; &nbsp; <input type="text" id="dob" class="fm-inputph3" placeholder="Date of Birth" value="" required>&nbsp; </div>&nbsp; <!-- END dob -->&nbsp; <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">&nbsp; <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">&nbsp; <!-- Gender -->&nbsp; <div class="row registerRelationph3">&nbsp; &nbsp; <label class="fm-input"> Relation :</label>&nbsp; &nbsp; <select class="fm-input otherMenu" id="relation1" required>&nbsp; &nbsp; &nbsp; <option value="Husband"> Husband </option>&nbsp; &nbsp; &nbsp; <option value="Wife"> Wife </option>&nbsp; &nbsp; &nbsp; <option value="Son"> Son </option>&nbsp; &nbsp; &nbsp; <option value="Daughter"> Daughter </option>&nbsp; &nbsp; </select>&nbsp; </div>&nbsp; <!-- END -->&nbsp; <!-- DOb -->&nbsp; <div class="row">&nbsp; &nbsp; <label class="fm-input" style="font-size: 10px;"> Date Of Birth :</label>&nbsp; &nbsp; <input type="text" id="dob" class="fm-inputph3" placeholder="Date of Birth" value="" required>&nbsp; </div>&nbsp; <!-- END dob -->&nbsp; <button class="btn btn-lg" type="submit"> Save Details <i class="fa fa-check-circle" ></i></button></form><!-- End card 2--><!-- Card 3--><form method="POST" action="#" id="phase3">&nbsp; <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">&nbsp; <!-- Gender -->&nbsp; <div class="row registerRelationph3">&nbsp; &nbsp; <label class="fm-input"> Relation :</label>&nbsp; &nbsp; <select class="fm-input otherMenu" id="relation1" required>&nbsp; &nbsp; &nbsp; <option value="Husband"> Husband </option>&nbsp; &nbsp; &nbsp; <option value="Wife"> Wife </option>&nbsp; &nbsp; &nbsp; <option value="Son"> Son </option>&nbsp; &nbsp; &nbsp; <option value="Daughter"> Daughter </option>&nbsp; &nbsp; </select>&nbsp; </div>&nbsp; <!-- END -->&nbsp; <!-- DOb -->&nbsp; <div class="row">&nbsp; &nbsp; <label class="fm-input" style="font-size: 10px;"> Date Of Birth :</label>&nbsp; &nbsp; <input type="text" id="dob" class="fm-inputph3" placeholder="Date of Birth" value="" required>&nbsp; </div>&nbsp; <!-- END dob -->&nbsp; <button class="btn btn-lg" type="submit"> Save Details <i class="fa fa-check-circle" ></i></button></form><!-- End card 3-->