how to get the selected value of dropdown in next js

How to Get the Selected Value of Dropdown in Next.js#

If you're building a web application using Next.js and you want to get the value of a dropdown menu, there are a few ways to do it.

Using React Hooks#

One way to get the selected value of a dropdown in Next.js is to use React hooks. Here's an example:

import React, { useState } from 'react';

function Dropdown() {
  const [selectedValue, setSelectedValue] = useState('');

  function handleChange(event) {
    setSelectedValue(event.target.value);
  }

  return (
    <select value={selectedValue} onChange={handleChange}>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
  );
}

export default Dropdown;

In this example, we're using the useState hook to create a state variable called selectedValue, which will hold the selected value of the dropdown. We're also using the onChange event to update the selectedValue state whenever the user selects a new option.

Using Refs#

Another way to get the selected value of a dropdown in Next.js is to use refs. Here's an example:

import React, { useRef } from 'react';

function Dropdown() {
  const dropdownRef = useRef(null);

  function handleClick() {
    const selectedValue = dropdownRef.current.value;
    console.log(selectedValue);
  }

  return (
    <div>
      <select ref={dropdownRef}>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
      </select>
      <button onClick={handleClick}>Get Value</button>
    </div>
  );
}

export default Dropdown;

In this example, we're using the useRef hook to create a ref called dropdownRef, which will reference the dropdown element. We're also using a handleClick function to get the selected value of the dropdown when the user clicks a button.

Using Vanilla JavaScript#

If you're not using React, you can still get the selected value of a dropdown in Next.js using vanilla JavaScript. Here's an example:

<select id="dropdown">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

<button onclick="getValue()">Get Value</button>

<script>
  function getValue() {
    const dropdown = document.getElementById('dropdown');
    const selectedValue = dropdown.value;
    console.log(selectedValue);
  }
</script>

In this example, we're using the getElementById method to get a reference to the dropdown element. We're also using a getValue function to get the selected value of the dropdown when the user clicks a button.

There are many ways to get the selected value of a dropdown in Next.js. Whether you're using React hooks, refs, or vanilla JavaScript, the important thing is to choose the method that works best for your application.