CODEWITHSUNDEEP
javascripthtmlreactjs
Programmer97
Programmer97

Reputation: 41

How to get the Id of an element from <select> in React?

I have a function handleSubmit(event){}. How can I get the id of a selected option?

<select id="category">
   <option id="1">Travel</option>
   <option id="2">Auto Loan</option>
</select>

Upvotes: 3

Views: 9932

Answers (4)

S. Hesam
S. Hesam

Reputation: 6603

According to reactjs.org https://reactjs.org/docs/forms.html#the-select-tag the <select> element has a little different in react than HTML. In HTML, <select> creates a drop-down list. For example, this HTML creates a drop-down list of flavors:

<select>
  <option value="grapefruit">Grapefruit</option>
  <option value="lime">Lime</option>
  <option selected value="coconut">Coconut</option>
  <option value="mango">Mango</option>
</select>

Note that the Coconut option is initially selected, because of the selected attribute. React, instead of using this selected attribute, uses a value attribute on the root select tag. This is more convenient in a controlled component because you only need to update it in one place. For example:

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'coconut'};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('Your favorite flavor is: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your favorite flavor:
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Upvotes: 1

Ken Bekov
Ken Bekov

Reputation: 14015

HTMLSelectElement element has selectedIndex property. Using it and list of children you can get child's attribute:

<select id="category" onChange={this.selectChanged}>
    <option id="1">Travel</option>
    <option id="2">Auto Loan</option>
</select>

selectChanged(event){
    const select = event.target;
    const id = select.children[select.selectedIndex].id;
    //now you can store the id's value to state or somewhere else
}

If you need to get id in form submit handler you have to find select by id, then do the same:

onSubmit(event) {
    const form = event.target;
    const select = form.elements.namedItem('category');
    const id = select.children[select.selectedIndex].id;

}

Upvotes: 2

Sajeeb Ahamed
Sajeeb Ahamed

Reputation: 6390

I think you should use value instead of ID. But if you badly need the ID of the selected option then you can try this-

  handleChange = (event) => {
      const index = event.target.selectedIndex;
      const optionElement = event.target.childNodes[index];
      const optionElementId = optionElement.getAttribute('id');

      console.log(optionElementId);
  }

And the select list is-

<select onChange={this.handleChange}>
    <option id="1">Travel</option>
    <option id="2">Autoloan</option>
</select>

Upvotes: 5

Steven
Steven

Reputation: 609

You can do it using value, for example create this state and function

const [category, setCategory] = useState("1");
const handleChange = (e) => { setCategory(e.target.value) }

then you can do it like this

<select value={category} onChange={this.handleChange}>
    <option value="1">Travel</option>
    <option value="2">Autoloan</option>
</select>

Upvotes: 1

Related Questions