how to pass extra value in a html select which we want to use onChange function

Question

<select className="form-select" onChange={(e)=>changeCountry(e)}>
            <option selected>Country</option>
            {Country.getAllCountries().map((item,index)=>(
              <option value={item.name.toUpperCase()} code={item.isoCode} key={index}>{item.name}</option>
            ))}
          </select>

In this select input code i want to save the countries in normal words but i still need the isoCode because i need to fetch the states of that country

so when i am doing this by changeCountry function

const changeCountry = (e)=>{
    setCountry(e.target.value)
    console.log(e.target.code)
    console.log("The state of the country",State.getStatesOfCountry(e.target.code))
    setAllStateType(State.getStatesOfCountry(e.target.code))
    
  }

Here why i am getting the code is undefined if i am getting it how can i pass the iso code to get the states of that country

how i solve this question by passing all the element in the value by Adding + ve sign and then split back

Why don't you put value = item.isoCode and then get name from .isoCode aslo? — Viet Dinh, Sep 13 '22 at 04:21

score 1 · Accepted Answer · answered Sep 13 '22 at 17:30

You can access it in your script with:

.getAttribute('code')

but first you need to determine which option is currently selected, so you should modify your function like so:

const changeCountry = (e)=>{
    let sel = e.target;
    let code = sel.options[sel.selectedIndex].getAttribute('code')
    //do whatever
    
}

Check this similar question: Get selected value in dropdown list using JavaScript

how to pass extra value in a html select which we want to use onChange function

1 Answers1