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

Question

我正在开发一个应用程序，我有一些卡片有选择下拉字段。 在卡片上我写了一个JavaScript逻辑，如果用户在第一张卡片选择下拉菜单中选择了一个妻子作为选项，那么第二个下拉妻子字段禁用哪个是好的。

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

标记代码

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

    <!-- Card 3-->
    <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 3-->**

Javascript代码

document.querySelector('.firstMenu').addEventListener('change', function () {
    document.querySelector('.otherMenu option[value="Wife"]').disabled = this.value === 'Wife';     
});

Answer 1

有两件事是错的：

1. 您在<label>上使用了otherMenu类而不是第二张卡的<select>
2. 您需要使用querySelectorAll()并迭代元素集合。 querySelector()只会选择第一个匹配的元素。

 document.querySelector('.firstMenu').addEventListener('change', function() { var selectedOption = this.value; var otherSelectOptions = document.querySelectorAll('.otherMenu option'); otherSelectOptions.forEach(function(option) { option.disabled = option.value === selectedOption; }); }); 

 <!-- 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"> 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 2--> <!-- Card 3--> <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 3-->