setState when changing value on a <select>

setState when changing value on a <select> - javascript

I have two <select> inputs. I want to set the attribute as "disable" one of them at a specific value option from the other <select>.
The first one is:
<select ref="selectOption">
<option selected value="1" >Option 1</option>
<option value="2" >Option 2</option>
</select>
<select ref="selectTime" disabled={this.state.disabled}>
<option value="a" >January</option>
<option value="b" >Febreaury</option>
</select>
So, my idea is to set the state of the 2nd <select> as false when the option value = 2 from the first <select>
How can I do it? Or is there another way without react that I can do it? or with props? I'm pretty confused. I tried to do something like:
var option= ReactDom.findDOMNode(this.refs.selectOption).value;
if( option == '2' ) this.setState({disabled:true});
But it's not working. Tried to put it in componentDidUpdate but the component is not updating when I select a new value from the select, so that won't work. Ideas please.
EDIT:
I also have this solution with jquery but I want to use Reactjs.
$('#selectOption').change(function() {
$('#selectTime').prop('disabled', false);
if ($(this).val() == '2') {
$('#selectTime').prop('disabled', true);
}
})
I'm pretty confused on how to use ReactDom.findDOMNode(this.refs.selectOption) instead the jquery selectors

Here is a minimal example of how you could accomplish this, add an onChange event handler to your first select, setState in the event handler based on the value:
handleChange(event) {
let value = event.target.value;
this.setState({
disabled: value == '2'
});
}
render() {
return (
<div>
<select ref="selectOption" onChange={(e) => this.handleChange(e)}>
<option selected value="1" >Option 1</option>
<option value="2" >Option 2</option>
</select>
<select ref="selectTime" disabled={this.state.disabled}>
<option value="a" >January</option>
<option value="b" >Febreaury</option>
</select>
</div>
)
}

That would be the react way to achieve this:
export default class Test extends Component{
constructor(props) {
super(props)
this.state = {
selectOptionValue: '1'
}
}
handleOnChange = (e) => {
this.setState({
selectOptionValue: e.target.value
})
}
render(){
return (
<div>
<select defaultValue = "1" onChange={this.handleOnChange}>
<option value="1" >Option 1</option>
<option value="2" >Option 2</option>
</select>
<select disabled={ this.state.selectOptionValue === '2' }>
<option value="a" >January</option>
<option value="b" >Febreaury</option>
</select>
</div>
)
}
}

How about onChange event from this ? For your convenience:
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 La Croix 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>
);
}
}

If you want to keep it simple and use pure javascript, you could just use the following snippet.
document.querySelector('select[ref="selectOption"]').addEventListener('change', function(e) {
document.querySelector('select[ref="selectTime"]').disabled = (e.target.value === '2') ? true : false;
})
<select ref="selectOption">
<option selected value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select ref="selectTime">
<option value="a">January</option>
<option value="b">Febreaury</option>
</select>

Here's another approach to define which state variable needs to be set.
state = { someStateVariable : "" }
render() {
return (
<select onChange={event => this._setSelected({ someStateVariable: event.target.value })}>
<option value="1">One</option>
...
</select>
);
}
_setSelected = newState => {
this.setState(newState)
}

Step 1 - Create state and set initial value an empty string
const [category,setCategory] = useState('');
Step 2 Map youre options and check id in the option value === select value then set selected to true
const renderedResults = results.map((result) => {
const selected = category === result.id ? "true" : '';
return (
<option selected={selected} key={result._id} value={result._id}>{result?.name}</option>
);
});
Step 3
<select
onChange={(e) => {
setCategory(e.target.value);
}}
className="form-select"
aria-label={"Default select example"}
>
<option value="">Select a category</option>
{renderedResults}
</select>

Related

not being able to console the data which is taken using UseRef() hook in react

i have two product cards each have it's own category like color,size,etc and each have add to cart button. im using useRef() hook to get the selected category by user. and console it, when i click add to cart button.the problem is im only getting the second product category selected by the user whenever i press both buttons. please do check the code below.feel free to ask for any clarification.
import "./Card.css";
import { useRef } from "react";
function Card() {
const colorRef = useRef();
const quantityRef = useRef();
const sizeRef = useRef();
const submitHandler = (event) => {
event.preventDefault();
const selectedColor = colorRef.current.value;
const selectedQuantity = quantityRef.current.value;
const selectedSize = sizeRef.current.value;
const selectedData = {
color: selectedColor,
quantity: selectedQuantity,
size: selectedSize
};
console.log(selectedData);
};
return (
<div className="main-container">
<div className="container">
<div className="image-container">
<img
src="https://images.pexels.com/photos/9558601/pexels-photo-9558601.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt=""
/>
</div>
<h2> T-Shirt </h2>
</div>
<form className="form-conatiner" onSubmit={submitHandler}>
<div className="selectors">
<p>Solid Round Neck T-shirt</p>
<select id="color" ref={colorRef} name="color" required>
<option>Color</option>
<option value="black">Black</option>
<option value="green">Green</option>
<option value="orange">Orange</option>
</select>
<select ref={quantityRef} name="qantity" required>
<option>Quantity</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select ref={sizeRef} name="size" required>
<option>Size</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="small">Small</option>
</select>
<div>
<button>Add to Cart</button>
</div>
</div>
</form>
<div className="container">
<div className="image-container">
<img
src="https://images.pexels.com/photos/440320/pexels-photo-440320.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt=""
/>
</div>
<h2> i-Watch </h2>
</div>
<div className="form-conatiner">
<div className="selectors">
<p>Dizo watch with amlod </p>
<select id="2" ref={colorRef} name="color" required>
<option>Brand</option>
<option value="Apple">Apple</option>
<option value="Samsung">Samsung</option>
<option value="Pixel">Pixel</option>
</select>
<select ref={quantityRef} name="qantity" required>
<option>Quantity</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select ref={sizeRef} name="size" required>
<option>size </option>
<option value="29mm">29mm</option>
<option value="34mm">34mm</option>
<option value="42mm">42mm</option>
</select>
<div>
<button onClick={submitHandler}>Add to Cart</button>
</div>
</div>
</div>
</div>
);
}
export default Card;

You are using same ref with different elements,so it will have reference to last element,to which it is passed, That's why you always get second product's references
You should try using ref array like this
const colorRef = useRef([]);
const quantityRef = useRef([]);
const sizeRef = useRef([]);
and pass it this way (here is for one product)
<select id="color" ref={(el)=>{colorRef.current.push(el)}} name="color" required>
<option>Color</option>
<option value="black">Black</option>
<option value="green">Green</option>
<option value="orange">Orange</option>
</select>
<select ref={(el)=>{quantityRef.current.push(el)}} name="qantity" required>
<option>Quantity</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select ref={(el)=>{sizeRef.current.push(el)}} name="size" required>
<option>Size</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="small">Small</option>
</select>
and then use it like this way in you submit handler
const submitHandler = (event) => {
event.preventDefault();
const selectedColor1 = colorRef.current[0].value;
const selectedColor2 = colorRef.current[1].value;
const selectedQuantity1 = quantityRef.current[0].value;
const selectedQuantity2 = quantityRef.current[1].value;
const selectedSize1 = sizeRef.current[0].value;
const selectedSize2 = sizeRef.current[1].value;
const selectedData1 = {
color: selectedColor1,
quantity: selectedQuantity1,
size: selectedSize1
};
const selectedData2 = {
color: selectedColor2,
quantity: selectedQuantity2,
size: selectedSize2
};
console.log(selectedData1);
console.log(selectedData2);
};
A working codesandbox is here.
A good and sort read Here. Hope this will help.

That is an expected behaviour. The ref is going to be assigned to the first element and then to the second one. That is why you're getting always the last.
Second one, you're wrapping only one element with the form tag.
For this you should use useState hook and the onChange for the inputs. Let's say:
function Card() {
const [firstElement, setFirstElement] = useState({})
const [secondElement, setSecondElement] = useState({})
const handleFirstElementChange = (key, event) => {
setFirstElement((oldState) => ({ ...oldState, [key]: event.target.value }))
}
const submitHandler = (event) => {
event.preventDefault();
console.log(firstElement, secondElement);
};
return <>
<h2>T-shirt</h2>
<select id="color" required onChange={(event) => handleFirstElementChange('color', event)>
<option>Pick a color</option>
<option value="black">Black</option>
<option value="white">White</option>
<option value="red">Ref</option>
</select>
</>
}

Reset other selects based upon on one select (ReactJS)

The goal here is to make it to where everytime a parent select changes it's value, all children selects get their value reset to default(1st value of empty string).
import React, {Component} from 'react';
class TestingSelects extends Component {
constructor(props) {
super(props);
this.state = {
selectOneValue: "",
selectTwoValue: "",
selectThreeValue: "",
selectFourValue: ""
}
}
selectOneOnChangeHandler = (ev) => {
this.setState({
selectOneValue: ev.target.value,
selectTwoValue: "",
selectThreeValue: "",
selectFourValue: ""
});
}
selectTwoOnChangeHandler = (ev) => {
this.setState({
...this.state,
selectTwoValue: ev.target.value,
selectThreeValue: "",
selectFourValue: ""
});
}
selectThreeOnChangeHandler = (ev) => {
this.setState({
...this.state,
selectThreeValue: ev.target.value,
selectFourValue: ""
});
}
selectFourChangeHandler = (ev) => {
this.setState({...this.state, selectFourValue: ev.target.value});
}
render(){
return (
<div>
<form>
<div>
<select onChange={ev => this.selectOneOnChangeHandler(ev)}>
<option value="">Please Select an Option</option>
<option value="select1option1">select 1 option 1</option>
<option value="select1option2">select 1 option 2</option>
</select>
</div>
{
this.state.selectOneValue === "select1option1" &&
<div>
<select onChange={ev => this.selectTwoOnChangeHandler(ev)}>
<option value="">Please Select an Option</option>
<option value="select2option1">select 2 option 1</option>
<option value="select2option2">select 2 option 2</option>
<option value="select2option3">select 2 option 3</option>
<option value="select2option4">select 2 option 4</option>
<option value="select2option5">select 2 option 5</option>
<option value="select2option6">select 2 option 6</option>
<option value="select2option7">select 2 option 7</option>
</select>
</div>
}
{
(this.state.selectTwoValue === "select2option1" ||
this.state.selectTwoValue === "select2option2" ||
this.state.selectTwoValue === "select2option5" ||
this.state.selectTwoValue === "select2option7") &&
<div>
<select onChange={ev => this.selectThreeOnChangeHandler(ev)}>
<option value="">Please Select an Option</option>
<option value="select3option1">select 3 option 1</option>
<option value="select3option2same">select 3 option 2</option>
<option value="select3option2same">select 3 option 3</option>
</select>
</div>
}
{
this.state.selectThreeValue === "select3option2same" &&
<div>
<select onChange={ev => this.selectFourOnChangeHandler(ev)}>
<option value="">Please Select an Option</option>
<option value="allowed">Yes</option>
<option value="denied">No</option>
</select>
</div>
}
</form>
</div>
)
}
}
export default TestingSelects;
Edit: How to reproduce issue...
[First Select]: select 1 option 1
[Second Select]: select 2 option 1
[Third Select]: select 3 option 1
[Second Select]: select 2 option 2
Here is where the 3rd select should reset to "Please Select an Option"
Does anyone know how to do this?

Everything should work as long as you bind the state to the value props of each <select> element. The reason why your code doesn't work is because you are not binding the value of each select to the component's state.
For instance, this is what you should be doing:
<select onChange={ev => this.selectOneOnChangeHandler(ev)} value={this.state.selectOneValue}>

One dropdown field leading to updated values for another dropdown field

I have two drop downs, when dropdown-1 is changed, selected option of dropdown-2 should be changed to the same as dropdown-1
Dropdown-1:
<div className="select-style-right joiner-select">
<select className="selectalljoiners" onChange={this.handleMainSelectChanged} value={this.state.selectedJoinerValue}>
<option value="">Select</option>
<option value="Permanent">Permanent</option>
<option value="Probationary">Probationary</option>
<option value="Contractual">Contractual</option>
<option value="Intern">Intern</option>
</select>
</div>
Dropdown-2:
<div className="select-style-right joiner-select">
<select className={index} value={this.state.selectedJoinerValue}>
<option value="">Select</option>
<option value="Permanent">Permanent</option>
<option value="Probationary">Probationary</option>
<option value="Contractual">Contractual</option>
<option value="Intern">Intern</option>
</select>
</div>
handleMainSelectChanged:
handleMainSelectChanged = (e) => {
thisclass.setState({
selectedJoinerValue: e.target.value
})
}
New to React, don't know how to achieve this. Please help out.

If one of dropdowns changed the second one will take same selected option.
https://jsfiddle.net/b1atetou/
class Example extends React.Component {
constructor() {
super();
this.state = { value: "" }
}
handleDropDownChage = (event) => {
this.setState({value: event.target.value});
}
render() {
return (
<div>
<div>
<select onChange={this.handleDropDownChage} value={this.state.value}>
<option value="">Select</option>
<option value="Permanent">Permanent</option>
<option value="Probationary">Probationary</option>
<option value="Contractual">Contractual</option>
<option value="Intern">Intern</option>
</select>
</div>
<div>
<select onChange={this.handleDropDownChage} value={this.state.value}>
<option value="">Select</option>
<option value="Permanent">Permanent</option>
<option value="Probationary">Probationary</option>
<option value="Contractual">Contractual</option>
<option value="Intern">Intern</option>
</select>
</div>
</div>
);
}
}

How to get selected value of a dropdown menu in ReactJS

I'm using react and I want to get the value of the selected option of a dropdown in react but I don't know how. Any suggestions? thanks!
My dropdown is just a select like:
<select id = "dropdown">
<option value="N/A">N/A</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

The code in the render method represents the component at any given time.
If you do something like this, the user won't be able to make selections using the form control:
<select value="Radish">
<option value="Orange">Orange</option>
<option value="Radish">Radish</option>
<option value="Cherry">Cherry</option>
</select>
So there are two solutions for working with forms controls:
Controlled Components Use component state to reflect the user's selections. This provides the most control, since any changes you make to state will be reflected in the component's rendering:
example:
var FruitSelector = React.createClass({
getInitialState:function(){
return {selectValue:'Radish'};
},
handleChange:function(e){
this.setState({selectValue:e.target.value});
},
render: function() {
var message='You selected '+this.state.selectValue;
return (
<div>
<select
value={this.state.selectValue}
onChange={this.handleChange}
>
<option value="Orange">Orange</option>
<option value="Radish">Radish</option>
<option value="Cherry">Cherry</option>
</select>
<p>{message}</p>
</div>
);
}
});
React.render(<FruitSelector name="World" />, document.body);
JSFiddle: http://jsfiddle.net/xe5ypghv/
Uncontrolled Components The other option is to not control the value and simply respond to onChange events. In this case you can use the defaultValue prop to set an initial value.
<div>
<select defaultValue={this.state.selectValue}
onChange={this.handleChange}
>
<option value="Orange">Orange</option>
<option value="Radish">Radish</option>
<option value="Cherry">Cherry</option>
</select>
<p>{message}</p>
</div>
http://jsfiddle.net/kb3gN/10396/
The docs for this are great: http://facebook.github.io/react/docs/forms.html
and also show how to work with multiple selections.
UPDATE
A variant of Option 1 (using a controlled component) is to use Redux and React-Redux to create a container component. This involves connect and a mapStateToProps function, which is easier than it sounds but probably overkill if you're just starting out.

Implement your Dropdown as
<select id = "dropdown" ref = {(input)=> this.menu = input}>
<option value="N/A">N/A</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
Now, to obtain the selected option value of the dropdown menu just use:
let res = this.menu.value;

It should be like:
import React, { useState } from "react";
export default function App() {
const getInitialState = () => {
const value = "Orange";
return value;
};
const [value, setValue] = useState(getInitialState);
const handleChange = (e) => {
setValue(e.target.value);
};
return (
<div>
<select value={value} onChange={handleChange}>
<option value="Orange">Orange</option>
<option value="Radish">Radish</option>
<option value="Cherry">Cherry</option>
</select>
<p>{`You selected ${value}`}</p>
</div>
);
}
you can see it here: https://codesandbox.io/s/quizzical-https-t1ovo?file=/src/App.js:0-572

Just use onChange event of the <select> object.
Selected value is in e.target.value then.
By the way, it's a bad practice to use id="...". It's better to use ref=">.."
http://facebook.github.io/react/docs/more-about-refs.html

As for front-end developer many time we are dealing with the forms in which we have to handle the dropdowns and we have to
use the value of selected dropdown to perform some action or the send the value on the Server, it's very simple
you have to write the simple dropdown in HTML just put the one onChange method for the selection in the dropdown
whenever user change the value of dropdown set that value to state so you can easily access it in AvFeaturedPlayList
1
remember you will always get the result as option value and not the dropdown text which is displayed on the screen
import React, { Component } from "react";
import { Server } from "net";
class InlineStyle extends Component {
constructor(props) {
super(props);
this.state = {
selectValue: ""
};
this.handleDropdownChange = this.handleDropdownChange.bind(this);
}
handleDropdownChange(e) {
this.setState({ selectValue: e.target.value });
}
render() {
return (
<div>
<div>
<div>
<select id="dropdown" onChange={this.handleDropdownChange}>
<option value="N/A">N/A</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div>Selected value is : {this.state.selectValue}</div>
</div>
</div>
);
}
}
export default InlineStyle;

Using React Functional Components:
const [option,setOption] = useState()
function handleChange(event){
setOption(event.target.value)
}
<select name='option' onChange={handleChange}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

import React from 'react';
import Select from 'react-select';
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' },
];
class App extends React.Component {
state = {
selectedOption: null,
};
handleChange = selectedOption => {
this.setState({ selectedOption });
console.log(`Option selected:`, selectedOption);
};
render() {
const { selectedOption } = this.state;
return (
<Select
value={selectedOption}
onChange={this.handleChange}
options={options}
/>
);
}
}
And you can check it out on this site.

It is as simple as that. You just need to use "value" attributes instead of "defaultValue" or you can keep both if a pre-selected feature is there.
....
const [currentValue, setCurrentValue] = useState(2);
<select id = "dropdown" value={currentValue} defaultValue={currentValue}>
<option value="N/A">N/A</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
.....
setTimeut(()=> {
setCurrentValue(4);
}, 4000);
In this case, after 4 secs the dropdown will be auto-selected with option 4.

I was making a drop-down menu for a language selector - but I needed the dropdown menu to display the current language upon page load. I would either be getting my initial language from a URL param example.com?user_language=fr, or detecting it from the user’s browser settings. Then when the user interacted with the dropdown, the selected language would be updated and the language selector dropdown would display the currently selected language.
In the spirit of the other answers using food examples, I got all sorts of fruit goodness for you.
First up, answering the initially asked question with a basic React functional component - two examples with and without props, then how to import the component elsewhere.
Next up, the same example - but juiced up with Typescript.
Then a bonus finale - A language selector dropdown component using Typescript.
Basic React (16.13.1) Functional Component Example. Two examples of FruitSelectDropdown , one without props & one with accepting props fruitDetector
import React, { useState } from 'react'
export const FruitSelectDropdown = () => {
const [currentFruit, setCurrentFruit] = useState('oranges')
const changeFruit = (newFruit) => {
setCurrentFruit(newFruit)
}
return (
<form>
<select
onChange={(event) => changeFruit(event.target.value)}
value={currentFruit}
>
<option value="apples">Red Apples</option>
<option value="oranges">Outrageous Oranges</option>
<option value="tomatoes">Technically a Fruit Tomatoes</option>
<option value="bananas">Bodacious Bananas</option>
</select>
</form>
)
}
Or you can have FruitSelectDropdown accept props, maybe you have a function that outputs a string, you can pass it through using the fruitDetector prop
import React, { useState } from 'react'
export const FruitSelectDropdown = ({ fruitDetector }) => {
const [currentFruit, setCurrentFruit] = useState(fruitDetector)
const changeFruit = (newFruit) => {
setCurrentFruit(newFruit)
}
return (
<form>
<select
onChange={(event) => changeFruit(event.target.value)}
value={currentFruit}
>
<option value="apples">Red Apples</option>
<option value="oranges">Outrageous Oranges</option>
<option value="tomatoes">Technically a Fruit Tomatoes</option>
<option value="bananas">Bodacious Bananas</option>
</select>
</form>
)
}
Then import the FruitSelectDropdown elsewhere in your app
import React from 'react'
import { FruitSelectDropdown } from '../path/to/FruitSelectDropdown'
const App = () => {
return (
<div className="page-container">
<h1 className="header">A webpage about fruit</h1>
<div className="section-container">
<h2>Pick your favorite fruit</h2>
<FruitSelectDropdown fruitDetector='bananas' />
</div>
</div>
)
}
export default App
FruitSelectDropdown with Typescript
import React, { FC, useState } from 'react'
type FruitProps = {
fruitDetector: string;
}
export const FruitSelectDropdown: FC<FruitProps> = ({ fruitDetector }) => {
const [currentFruit, setCurrentFruit] = useState(fruitDetector)
const changeFruit = (newFruit: string): void => {
setCurrentFruit(newFruit)
}
return (
<form>
<select
onChange={(event) => changeFruit(event.target.value)}
value={currentFruit}
>
<option value="apples">Red Apples</option>
<option value="oranges">Outrageous Oranges</option>
<option value="tomatoes">Technically a Fruit Tomatoes</option>
<option value="bananas">Bodacious Bananas</option>
</select>
</form>
)
}
Then import the FruitSelectDropdown elsewhere in your app
import React, { FC } from 'react'
import { FruitSelectDropdown } from '../path/to/FruitSelectDropdown'
const App: FC = () => {
return (
<div className="page-container">
<h1 className="header">A webpage about fruit</h1>
<div className="section-container">
<h2>Pick your favorite fruit</h2>
<FruitSelectDropdown fruitDetector='bananas' />
</div>
</div>
)
}
export default App
Bonus Round: Translation Dropdown with selected current value:
import React, { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
export const LanguageSelectDropdown: FC = () => {
const { i18n } = useTranslation()
const i18nLanguage = i18n.language
const [currentI18nLanguage, setCurrentI18nLanguage] = useState(i18nLanguage)
const changeLanguage = (language: string): void => {
i18n.changeLanguage(language)
setCurrentI18nLanguage(language)
}
return (
<form>
<select
onChange={(event) => changeLanguage(event.target.value)}
value={currentI18nLanguage}
>
<option value="en">English</option>
<option value="de">Deutsch</option>
<option value="es">Español</option>
<option value="fr">Français</option>
</select>
</form>
)
}
An invaluable resource for React/Typescript

You can handle it all within the same function as following
<select className="form-control mb-3" onChange={(e) => this.setState({productPrice: e.target.value})}>
<option value="5">5 dollars</option>
<option value="10">10 dollars</option>
</select>
as you can see when the user select one option it will set a state and get the value of the selected event without furder coding require!

If you want to get value from a mapped select input then you can refer to this example:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
fruit: "banana",
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
console.log("Fruit Selected!!");
this.setState({ fruit: e.target.value });
}
render() {
return (
<div id="App">
<div className="select-container">
<select value={this.state.fruit} onChange={this.handleChange}>
{options.map((option) => (
<option value={option.value}>{option.label}</option>
))}
</select>
</div>
</div>
);
}
}
export default App;

import {React, useState }from "react";
function DropDown() {
const [dropValue, setDropValue ]= useState();
return <>
<div>
<div class="dropdown">
<button class="btn btn-secondary" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
{dropValue==null || dropValue=='' ?'Select Id':dropValue}
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" onClick={()=> setDropValue('Action')} href="#">Action</a></li>
<li><a class="dropdown-item" onClick={()=> setDropValue('Another action')} href="#">Another action</a></li>
<li><a class="dropdown-item" onClick={()=> setDropValue('Something else here')} href="#">Something else here</a></li>
</ul>
</div>
</div>
</>
}
export default DropDown

<select value ={this.state.value} onChange={this.handleDropdownChange}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

As mentioned by Karen above you can just use the target value from the event triggered. Here is a small snippet of the code
`<select class="form-select py-2"
onChange={(e) => setVotersPerPage(e.target.value)}>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
</select>`

Javascript - Make an element dissapear if an option is selected

I have a list of countries in a drop-down menu
<select name="country_list" id="countries"><option value="">Please select</option>
<option value="1">USA</option>
<option value="2" selected="">Canada</option>
<option value="3">Rest of the World</option>
<p><input type="text" name="state_field" value="" id="state"></p>
My goal is: If value 3 is selected, the input field "state" disappears. If option 1 or 2 are selected, it should show the field "state".
In case the user has already entered a value in the input field "state" (because option 1 or 2 were previously selected) and he changes it to option 3, the code should first erase the value entered in the state field and then make that field disappear.
How would the Javascript code look like?
I appreciate your help!
UPDATE:
Apparently there is a function already running "onchange", so that the HTML looks this way:
<select name="<select name="country_List" onchange="checkCountry();" id="countries">
<option value="">––> Select</option>
<option value="1">USA</option>
<option value="2">Canada</option>
<option value="3">Mexico</option>"
<option value="4">Argentina</option>"
<option value="5">Australia</option>"
</select>
This seems to be interfering with the codes suggested for this case. Is it there any way to run the code to hide the "state" after the "onchange" function "checkCountry()" has been run?

First you need to validate your html; you're missing a closing </select> tag. Second, the textbox has to be disabled when not required so that it is not included in the form data when the form is submitted. The following should meet your requirements:
$('#countries').on('change', function() {
if( $.trim( this.value ) === '3' ) {
$('#state').val('').prop('disabled', true).closest('p').hide();
} else {
$('#state').prop('disabled', false).closest('p').show();
}
});
$('#countries').on('change', function() {
if( $.trim( this.value ) === '3' ) {
$('#state').val('').prop('disabled', true).closest('p').hide();
} else {
$('#state').prop('disabled', false).closest('p').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="country_list" id="countries"><option value="">Please select</option>
<option value="1">USA</option>
<option value="2" selected="">Canada</option>
<option value="3">Rest of the World</option>
</select>
<p><input type="text" name="state_field" value="" id="state"></p>
UPDATE
And this should meet your updated requirements; you would just update the logic so you end up with the least number of clauses or boolean expressions in the if condition:
$('#countries').on('change', function() {
if( $.trim( this.value ) === '2' || $.trim( this.value ) === '1') {
$('#state').prop('disabled', false).closest('p').show();
} else {
$('#state').val('').prop('disabled', true).closest('p').hide();
}
})
.change();
$('#countries').on('change', function() {
if( ['1','2'].indexOf( this.value ) > -1 ) {
$('#state').prop('disabled', false).closest('p').show();
} else {
$('#state').val('').prop('disabled', true).closest('p').hide();
}
})
.change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="country_list" id="countries"><option value="">Please select</option>
<option value="1">USA</option>
<option value="2" selected="">Canada</option>
<option value="3">Rest of the World</option>
</select>
<p><input type="text" name="state_field" value="" id="state"></p>
Please note that .change() triggers the change event when the page loads so that if the value is not 1 or 2, the textbox will be hidden.

in javascript:
<script>
function show(mode)
{
document.getElementById('state').style.visibility = (mode) ? 'visible' : 'hidden';
}
<script>
<select name="country_list" id="countries"><option value="">Please select</option>
<option value="1" onclick="show(true)">USA</option>
<option value="2" onclick="show(true)">Canada</option>
<option value="3" onclick="show(false)">Rest of the World</option>
<p><input type="text" name="state_field" value="" id="state"></p>

JSFIDDEL
$( "select#countries" )
.change(function () {
if($("select#countries option:selected").attr("value")=="3"){
$("select#countries").hide();
$("#state").show();
$("#state").val($("select#countries option:selected").text());
}else{
$("#state").hide();
$("select#countries").show();
$("#state").val("");
}
});
$( "#state" )
.change(function () {
if($("#state").val()==""){
$("#state").hide();
$("select#countries").show();
}else{
}
});
JSFIDDEL

Develop Reference

JavaScript is the programming language of the Web.

setState when changing value on a <select> - javascript

Related

not being able to console the data which is taken using UseRef() hook in react

Reset other selects based upon on one select (ReactJS)

One dropdown field leading to updated values for another dropdown field

How to get selected value of a dropdown menu in ReactJS

Javascript - Make an element dissapear if an option is selected

Categories

Resources