I m trying to create 2 select boxes in which options of 1st select box are fixed but the second ones change based on the selected value of first div. eg: 1st Select:
Solution 1:
You can create a lookup table object that holds both integers and Alphabets with each has a relevant key.
Then in one select you update the state with selected key and in the other select you render the options correspond to the selected key.
Here is a running example:
const lookup = {
"int": [
{ id: '1', text: '1' },
{ id: '2', text: '2' },
{ id: '3', text: '3' },
{ id: '4', text: '4' },
{ id: '5', text: '5' }
],
"abc": [
{ id: 'a', text: 'a' },
{ id: 'b', text: 'b' },
{ id: 'c', text: 'c' },
{ id: 'd', text: 'd' },
{ id: 'e', text: 'e' }
]
}
classAppextendsReact.Component {
constructor(props) {
super(props);
this.state = {
dataValue: 'int'
}
}
onChange = ({ target: { value } }) => {
this.setState({ dataValue: value });
}
render() {
const { dataValue } = this.state;
const options = lookup[dataValue];
return (
<div><selectonChange={this.onChange}><optionvalue="int">Integers</option><optionvalue="abc">Alphabets</option></select><hr /><select>
{options.map(o => <optionkey={o.id}value={o.id}>{o.text}</option>)}
</select></div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));Copy<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><divid="root"></div>CopySolution 2:
Hope this is helpful <!DOCTYPE html><html><body><selectid="sel"onchange="ChangeList()"><optionvalue="">select</option><optionvalue="I">Integer</option><optionvalue="A">Alphabet</option></select><selectid="type"></select><script>varIntandAlph = {};
IntandAlph['I'] = ['1', '2', '3','4','5','6','7','8','9','10'];
IntandAlph['A'] = ['A', 'B', 'C', 'D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
functionChangeList() {
var selList = document.getElementById("sel");
var typeList = document.getElementById("type");
var seltype = selList.options[selList.selectedIndex].value;
while (typeList.options.length) {
typeList.remove(0);
}
varNum = IntandAlph[seltype];
if (Num) {
var i;
for (i = 0; i < Num.length; i++) {
var sel = newOption(Num[i], i);
typeList.options.add(sel);
}
}
}
</script></body></html>Copy
Share
Post a Comment
for "Load Options Of A Select Box Dynamically Based On Value Of Another Select Box In React"
Top Question
Firefox, Chrome, Safari Have Grey Background For Mp4 Html5 Video
Any video (that I can make) with a white background becomes…
Red Border Still Appears On Inputs After Resetting An HTML 5 Form Firefox
I have an HTML 5 form! Great, I'm excited! I decide to …
Svg Animation And Firefox
I'm struggle with SVG animation drawing, which is work …
How To Save Html5 Geolocation Data To Python Django Admin?
Is it possible to save the javascript html5 geolocation lat…
How To Hide/show Tabs Using Jquery
I have four tabs.On loading only the first tab is opened an…
Form To Iframe Submission - How Do You Reset The Form After File Upload?
I have a form that submits the results to an iframe. The su…
How To Limit The Html Table Records In Each Page
I am populating a table in my jsp which has more than 20 re…
How To Display A Python String As Html In Jupyter Notebook
In IPython notebook, I used to be able to display a python …
How To Add Placeholder Field?
I've been trying to add placeholder in input type='…
Bounce Animation On A Scaled Object
What is the best way to have an object scale and then perfo…