Проблема с отключением определенных выпадающих полей выбора с помощью Javascript - PullRequest
Новая
       43

Проблема с отключением определенных выпадающих полей выбора с помощью Javascript

0 голосов
/ 03 мая 2019

Я работаю над приложением, в котором у меня есть несколько карт с выберите выпадающие поля. На картах я написал логику 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 -->

        <!-- 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.querySelectorAll('.otherMenu').addEventListener('change', function() {
    var selectedOption = this.value;
    var selectWife = document.querySelectorAll('.otherMenu option[value="Wife"]');
    var selectHusband = document.querySelectorAll('.otherMenu option[value="Husband"]');
        selectWife.forEach(function(option) {
            option.disabled = selectedOption === 'Wife';
        });
        selectHusband.forEach(function(option) {
            option.disabled = selectedOption === 'Husband';
        });
});

1 Ответ

1 голос
/ 03 мая 2019

Я думаю, вы не можете добавить список событий в список меню, это должно быть сделано для каждого меню 

var menus = document.querySelectorAll('.otherMenu');
for (let menu of menus) {
    menu.addEventListener('change', function () {
        var selectedOption = this.value;
        var selectWife = document.querySelectorAll('.otherMenu option[value="Wife"]');
        var selectHusband = document.querySelectorAll('.otherMenu option[value="Husband"]');
        selectWife.forEach(function (option) {
            option.disabled = selectedOption === 'Wife';
        });
        selectHusband.forEach(function (option) {
            option.disabled = selectedOption === 'Husband';
        });
    });
}
...