Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – On Radio Button select, select dropdown option with same value

I created 2 input, one is Radio Button, and one is Dropdown. I want user to click on radio button and it will select the option in the dropdown with the same value.

How can I do this with JS, not using Jquery?

Please help me with this.

Thank you!

My sample code:

   <p class="line-item-property__field">
       <label>Color</label><br>
       <input type="radio" name="color" value="1"> <span>1</span><br>
       <input type="radio" name="color" value="2"> <span>2</span><br>
       <input type="radio" name="color" value="3"> <span>3</span><br>
   </p>

   <p class="line-item-property__field">
        <label>Color</label><br>
         <select id="your-name" name="dropdown-color">
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
        </select>
    </p>
Tags:

2

Answers


  1. 0

    Yes you can add the event listeners to the properties in the radio button and for that event you can update the value of the dropdown values correspondingly.

    eg: you can do like:

    document.addEventListener('DOMContentLoaded', (event) => {
        const radiobtns = document.querySelectorAll('input[name="color"]');
        const dropdown = document.getElementById('dropdown-color');
    radiobtns.forEach(radio => {
        radio.addEventListener('click', () => {
            dropdown.value = radio.value;
        });
    });
});

    also please add the id as dropdown-color for the dropdown select list as

    <select id="dropdown-color" name="dropdown-color">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

    Hope this is what you need.

    Login or Signup to reply.
  2. 0

    1. Use event delegation. This will allow you to add one listener to a parent element of the radio buttons to "catch" events from them as they bubble up the DOM.

    2. The listener will call a function. First it will check that the event from the element that fired it is one of the radio buttons. Second it will assign that element’s value as the select element’s value.

    (In this example I’ve modified your sample markup slightly to use a fieldset element, and proper input labelling, which is perhaps more in line with the UI you’re trying to achieve.)

    // Cache the fieldset element, and the select element
const fieldset = document.querySelector('fieldset');
const select = document.querySelector('#your-name');

// Add a listener to the fieldset element that watches
// for changes among it or its child elements
fieldset.addEventListener('change', handleChange);

// When a change event happens
function handleChange(e) {

  // If the element that fired the event has a
  // name attribute of "color"
  if (e.target.closest('[name="color"]')) {

    // Change the select value to match that
    // changed element's value
    select.value = e.target.value;
  }
}
    body > section ~ section { margin-top: 1rem; }
    <section class="line-item-property__field">
  <fieldset>
    <legend>Color</legend>
    <label><input type="radio" name="color" value="1" checked>1</label>
    <label><input type="radio" name="color" value="2">2</label>
    <label><input type="radio" name="color" value="3">3</label>
  </fieldset>
</section>

<section class="line-item-property__field">
  <select id="your-name" name="dropdown-color">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
</section>

    Additional documentation

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search