CODEWITHSUNDEEP
javascript
ghost_of_the_code
ghost_of_the_code

Reputation: 359

Change value of select and radio button together

Is it possible to have the value of the select and the value of the radio button on the same value? I'll explain.

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 (i.e. the value of the select to the same value in which the radio button is selected).

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>

Upvotes: 1

Views: 805

Answers (1)

Barmar
Barmar

Reputation: 781004

Use the click event on the radio button, not input. When you click on a button, set the value of the select to the button's value (normally this is in the value attribute, but you're using data-filter instead).

And when you change the value of the select, use its value to select to corresponding radio button, and set its check property to choose it.

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>

Upvotes: 1

Related Questions