一起更改选择和单选按钮的值

Question

是否可以将选择的值和单选按钮的值设置在相同的值上？ 我会解释的。

What I want to get is that when the select changes it also changes (automatically) the radio button value to the same value in which the select is selected and vice versa (ie the value of the select to the same value in which the radio button被选中）。

 function filterCategoryRadio(ads) { let radios = document.querySelectorAll('.filter-category'); radios.forEach(radio => { radio.addEventListener('input', function() { let selected = radio.getAttribute('data-filter'); if (selected == "all") { listAds(ads); } else { let filtered = ads.filter(ann => ann.category == selected) //console.log(filtered); listAds(filtered); } }) }) } function filterCategorySelect(ads) { let input = document.querySelector('#category-select'); input.addEventListener('change', function() { if (input.value == "all") { listAds(ads); } else { let filtered = ads.filter(ann => ann.category == input.value) listAds(filtered); } }) }

 <div class="accordion-body"> <div class="row mt-2 mb-4"> <select class="form-select" aria-label="Default select example" id="category-select"> <option value="all" selected>All category</option> </select> </div> <div class="row" id="row-category-radio"> <div class="form-check"> <input class="form-check-input filter-category" type="radio" name="category-filter" id="flexRadioDefault1" data-filter="all" checked> <label class="form-check-label" for="flexRadioDefault1"> All category </label> </div> </div>

Answer 1

使用单选按钮上的click事件，而不是input 。 当您单击按钮时，将select的值设置为按钮的值（通常这是在value属性中，但您正在使用data-filter代替）。

当你改变select的值时，使用它的值来选择对应的单选按钮，并设置它的check属性来选择它。

 function filterCategoryRadio(ads) { let radios = document.querySelectorAll('.filter-category'); radios.forEach(radio => { radio.addEventListener('click', function() { let selected = radio.getAttribute('data-filter'); document.querySelector("#category-select").value = selected; if (selected == "all") { listAds(ads); } else { let filtered = ads.filter(ann => ann.category == selected) //console.log(filtered); listAds(filtered); } }) }) } function filterCategorySelect(ads) { let input = document.querySelector('#category-select'); input.addEventListener('change', function() { if (input.value == "all") { listAds(ads); } else { let filtered = ads.filter(ann => ann.category == input.value) listAds(filtered); } document.querySelector(`.filter-category[data-filter="${input.value}"]`).checked = true; }) }

 <div class="accordion-body"> <div class="row mt-2 mb-4"> <select class="form-select" aria-label="Default select example" id="category-select"> <option value="all" selected>All category</option> </select> </div> <div class="row" id="row-category-radio"> <div class="form-check"> <input class="form-check-input filter-category" type="radio" name="category-filter" id="flexRadioDefault1" data-filter="all" checked> <label class="form-check-label" for="flexRadioDefault1"> All category </label> </div> </div>