Show object's value text depending on select option
so I have this issue I am trying to solve, with React.
Let's say I have an object like so:
"options":
"open":
"text": "Open (Risky)",
"description": "Filler text for open"
,
"wpa":
"text": "WPAWPA2PSK (TKIP / AES)",
"description": "Filler text for wpa"
,
"wpa2":
"text": "WPA2-PSK (AES) (Recommended)",
"description": "Filler text for wpa2"
And I have it setup that the object's value's "text"
is used to populate option values in a select dropdown, like so:
const securityModeOptions = Object.values(securityMode.select.options);
securityModeOptions.map((mode, index) =>
<option key=index value=mode.text>
mode.text
</option>
)
What I would like to do is that whichever option value is selected, it's corresponding "description"
is displayed in a div
next to it, and the div changes based on whichever option is selected.
Thanks!
javascript reactjs
add a comment |
so I have this issue I am trying to solve, with React.
Let's say I have an object like so:
"options":
"open":
"text": "Open (Risky)",
"description": "Filler text for open"
,
"wpa":
"text": "WPAWPA2PSK (TKIP / AES)",
"description": "Filler text for wpa"
,
"wpa2":
"text": "WPA2-PSK (AES) (Recommended)",
"description": "Filler text for wpa2"
And I have it setup that the object's value's "text"
is used to populate option values in a select dropdown, like so:
const securityModeOptions = Object.values(securityMode.select.options);
securityModeOptions.map((mode, index) =>
<option key=index value=mode.text>
mode.text
</option>
)
What I would like to do is that whichever option value is selected, it's corresponding "description"
is displayed in a div
next to it, and the div changes based on whichever option is selected.
Thanks!
javascript reactjs
2
what have you tried so far?
– Sagiv b.g
Nov 12 at 16:03
honestly not much, because it is supposed to be done in a "react" way (which I am brand new to), and the way I have gotten it to sorta work is very sloppy, so I am looking for some suggestions on a clean solution...
– Lushmoney
Nov 12 at 16:05
add a comment |
so I have this issue I am trying to solve, with React.
Let's say I have an object like so:
"options":
"open":
"text": "Open (Risky)",
"description": "Filler text for open"
,
"wpa":
"text": "WPAWPA2PSK (TKIP / AES)",
"description": "Filler text for wpa"
,
"wpa2":
"text": "WPA2-PSK (AES) (Recommended)",
"description": "Filler text for wpa2"
And I have it setup that the object's value's "text"
is used to populate option values in a select dropdown, like so:
const securityModeOptions = Object.values(securityMode.select.options);
securityModeOptions.map((mode, index) =>
<option key=index value=mode.text>
mode.text
</option>
)
What I would like to do is that whichever option value is selected, it's corresponding "description"
is displayed in a div
next to it, and the div changes based on whichever option is selected.
Thanks!
javascript reactjs
so I have this issue I am trying to solve, with React.
Let's say I have an object like so:
"options":
"open":
"text": "Open (Risky)",
"description": "Filler text for open"
,
"wpa":
"text": "WPAWPA2PSK (TKIP / AES)",
"description": "Filler text for wpa"
,
"wpa2":
"text": "WPA2-PSK (AES) (Recommended)",
"description": "Filler text for wpa2"
And I have it setup that the object's value's "text"
is used to populate option values in a select dropdown, like so:
const securityModeOptions = Object.values(securityMode.select.options);
securityModeOptions.map((mode, index) =>
<option key=index value=mode.text>
mode.text
</option>
)
What I would like to do is that whichever option value is selected, it's corresponding "description"
is displayed in a div
next to it, and the div changes based on whichever option is selected.
Thanks!
javascript reactjs
javascript reactjs
asked Nov 12 at 16:02
Lushmoney
14711
14711
2
what have you tried so far?
– Sagiv b.g
Nov 12 at 16:03
honestly not much, because it is supposed to be done in a "react" way (which I am brand new to), and the way I have gotten it to sorta work is very sloppy, so I am looking for some suggestions on a clean solution...
– Lushmoney
Nov 12 at 16:05
add a comment |
2
what have you tried so far?
– Sagiv b.g
Nov 12 at 16:03
honestly not much, because it is supposed to be done in a "react" way (which I am brand new to), and the way I have gotten it to sorta work is very sloppy, so I am looking for some suggestions on a clean solution...
– Lushmoney
Nov 12 at 16:05
2
2
what have you tried so far?
– Sagiv b.g
Nov 12 at 16:03
what have you tried so far?
– Sagiv b.g
Nov 12 at 16:03
honestly not much, because it is supposed to be done in a "react" way (which I am brand new to), and the way I have gotten it to sorta work is very sloppy, so I am looking for some suggestions on a clean solution...
– Lushmoney
Nov 12 at 16:05
honestly not much, because it is supposed to be done in a "react" way (which I am brand new to), and the way I have gotten it to sorta work is very sloppy, so I am looking for some suggestions on a clean solution...
– Lushmoney
Nov 12 at 16:05
add a comment |
2 Answers
2
active
oldest
votes
You can manage a state of the selected key
, then grab the relevant entry from the options
object via the key
.
Something like this:
const options =
open:
text: "Open (Risky)",
description: "Filler text for open"
,
wpa:
text: "WPAWPA2PSK (TKIP / AES)",
description: "Filler text for wpa"
,
wpa2:
text: "WPA2-PSK (AES) (Recommended)",
description: "Filler text for wpa2"
;
class App extends React.Component
state = selectedOptionKey: "" ;
onChange = ( target ) =>
this.setState( selectedOptionKey: target.value );
;
render()
const selectedOptionKey = this.state;
const description =
options[selectedOptionKey] && options[selectedOptionKey].description;
return (
<div>
<select onChange=this.onChange>
<option>Choose</option>
Object.entries(options).map(([key, value]) => (
<option value=key>value.text</option>
))
</select>
<div>description</div>
</div>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"/>
1
Thank you, this worked perfectly!!
– Lushmoney
Nov 12 at 16:46
add a comment |
You could keep the key of the selected option in state and show the description
of this selected option.
Example
const options =
open:
text: "Open (Risky)",
description: "Filler text for open"
,
wpa:
text: "WPAWPA2PSK (TKIP / AES)",
description: "Filler text for wpa"
,
wpa2:
text: "WPA2-PSK (AES) (Recommended)",
description: "Filler text for wpa2"
;
class App extends React.Component
state =
options,
selected: Object.keys(options)[0]
;
onChange = event =>
this.setState( selected: event.target.value );
;
render()
const options, selected = this.state;
return (
<div>
<select onChange=this.onChange>
Object.keys(options).map(key => (
<option key=key value=key>
options[key].text
</option>
))
</select>
<span>options[selected].description</span>
</div>
);
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
1
Thanks, this was a good answer, I just noticed it after selecting the above as the answer; pretty much the same concept, and it worked perfectly...
– Lushmoney
Nov 12 at 16:47
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53265876%2fshow-objects-value-text-depending-on-select-option%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can manage a state of the selected key
, then grab the relevant entry from the options
object via the key
.
Something like this:
const options =
open:
text: "Open (Risky)",
description: "Filler text for open"
,
wpa:
text: "WPAWPA2PSK (TKIP / AES)",
description: "Filler text for wpa"
,
wpa2:
text: "WPA2-PSK (AES) (Recommended)",
description: "Filler text for wpa2"
;
class App extends React.Component
state = selectedOptionKey: "" ;
onChange = ( target ) =>
this.setState( selectedOptionKey: target.value );
;
render()
const selectedOptionKey = this.state;
const description =
options[selectedOptionKey] && options[selectedOptionKey].description;
return (
<div>
<select onChange=this.onChange>
<option>Choose</option>
Object.entries(options).map(([key, value]) => (
<option value=key>value.text</option>
))
</select>
<div>description</div>
</div>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"/>
1
Thank you, this worked perfectly!!
– Lushmoney
Nov 12 at 16:46
add a comment |
You can manage a state of the selected key
, then grab the relevant entry from the options
object via the key
.
Something like this:
const options =
open:
text: "Open (Risky)",
description: "Filler text for open"
,
wpa:
text: "WPAWPA2PSK (TKIP / AES)",
description: "Filler text for wpa"
,
wpa2:
text: "WPA2-PSK (AES) (Recommended)",
description: "Filler text for wpa2"
;
class App extends React.Component
state = selectedOptionKey: "" ;
onChange = ( target ) =>
this.setState( selectedOptionKey: target.value );
;
render()
const selectedOptionKey = this.state;
const description =
options[selectedOptionKey] && options[selectedOptionKey].description;
return (
<div>
<select onChange=this.onChange>
<option>Choose</option>
Object.entries(options).map(([key, value]) => (
<option value=key>value.text</option>
))
</select>
<div>description</div>
</div>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"/>
1
Thank you, this worked perfectly!!
– Lushmoney
Nov 12 at 16:46
add a comment |
You can manage a state of the selected key
, then grab the relevant entry from the options
object via the key
.
Something like this:
const options =
open:
text: "Open (Risky)",
description: "Filler text for open"
,
wpa:
text: "WPAWPA2PSK (TKIP / AES)",
description: "Filler text for wpa"
,
wpa2:
text: "WPA2-PSK (AES) (Recommended)",
description: "Filler text for wpa2"
;
class App extends React.Component
state = selectedOptionKey: "" ;
onChange = ( target ) =>
this.setState( selectedOptionKey: target.value );
;
render()
const selectedOptionKey = this.state;
const description =
options[selectedOptionKey] && options[selectedOptionKey].description;
return (
<div>
<select onChange=this.onChange>
<option>Choose</option>
Object.entries(options).map(([key, value]) => (
<option value=key>value.text</option>
))
</select>
<div>description</div>
</div>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"/>
You can manage a state of the selected key
, then grab the relevant entry from the options
object via the key
.
Something like this:
const options =
open:
text: "Open (Risky)",
description: "Filler text for open"
,
wpa:
text: "WPAWPA2PSK (TKIP / AES)",
description: "Filler text for wpa"
,
wpa2:
text: "WPA2-PSK (AES) (Recommended)",
description: "Filler text for wpa2"
;
class App extends React.Component
state = selectedOptionKey: "" ;
onChange = ( target ) =>
this.setState( selectedOptionKey: target.value );
;
render()
const selectedOptionKey = this.state;
const description =
options[selectedOptionKey] && options[selectedOptionKey].description;
return (
<div>
<select onChange=this.onChange>
<option>Choose</option>
Object.entries(options).map(([key, value]) => (
<option value=key>value.text</option>
))
</select>
<div>description</div>
</div>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"/>
const options =
open:
text: "Open (Risky)",
description: "Filler text for open"
,
wpa:
text: "WPAWPA2PSK (TKIP / AES)",
description: "Filler text for wpa"
,
wpa2:
text: "WPA2-PSK (AES) (Recommended)",
description: "Filler text for wpa2"
;
class App extends React.Component
state = selectedOptionKey: "" ;
onChange = ( target ) =>
this.setState( selectedOptionKey: target.value );
;
render()
const selectedOptionKey = this.state;
const description =
options[selectedOptionKey] && options[selectedOptionKey].description;
return (
<div>
<select onChange=this.onChange>
<option>Choose</option>
Object.entries(options).map(([key, value]) => (
<option value=key>value.text</option>
))
</select>
<div>description</div>
</div>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"/>
const options =
open:
text: "Open (Risky)",
description: "Filler text for open"
,
wpa:
text: "WPAWPA2PSK (TKIP / AES)",
description: "Filler text for wpa"
,
wpa2:
text: "WPA2-PSK (AES) (Recommended)",
description: "Filler text for wpa2"
;
class App extends React.Component
state = selectedOptionKey: "" ;
onChange = ( target ) =>
this.setState( selectedOptionKey: target.value );
;
render()
const selectedOptionKey = this.state;
const description =
options[selectedOptionKey] && options[selectedOptionKey].description;
return (
<div>
<select onChange=this.onChange>
<option>Choose</option>
Object.entries(options).map(([key, value]) => (
<option value=key>value.text</option>
))
</select>
<div>description</div>
</div>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"/>
answered Nov 12 at 16:11
Sagiv b.g
15.9k22054
15.9k22054
1
Thank you, this worked perfectly!!
– Lushmoney
Nov 12 at 16:46
add a comment |
1
Thank you, this worked perfectly!!
– Lushmoney
Nov 12 at 16:46
1
1
Thank you, this worked perfectly!!
– Lushmoney
Nov 12 at 16:46
Thank you, this worked perfectly!!
– Lushmoney
Nov 12 at 16:46
add a comment |
You could keep the key of the selected option in state and show the description
of this selected option.
Example
const options =
open:
text: "Open (Risky)",
description: "Filler text for open"
,
wpa:
text: "WPAWPA2PSK (TKIP / AES)",
description: "Filler text for wpa"
,
wpa2:
text: "WPA2-PSK (AES) (Recommended)",
description: "Filler text for wpa2"
;
class App extends React.Component
state =
options,
selected: Object.keys(options)[0]
;
onChange = event =>
this.setState( selected: event.target.value );
;
render()
const options, selected = this.state;
return (
<div>
<select onChange=this.onChange>
Object.keys(options).map(key => (
<option key=key value=key>
options[key].text
</option>
))
</select>
<span>options[selected].description</span>
</div>
);
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
1
Thanks, this was a good answer, I just noticed it after selecting the above as the answer; pretty much the same concept, and it worked perfectly...
– Lushmoney
Nov 12 at 16:47
add a comment |
You could keep the key of the selected option in state and show the description
of this selected option.
Example
const options =
open:
text: "Open (Risky)",
description: "Filler text for open"
,
wpa:
text: "WPAWPA2PSK (TKIP / AES)",
description: "Filler text for wpa"
,
wpa2:
text: "WPA2-PSK (AES) (Recommended)",
description: "Filler text for wpa2"
;
class App extends React.Component
state =
options,
selected: Object.keys(options)[0]
;
onChange = event =>
this.setState( selected: event.target.value );
;
render()
const options, selected = this.state;
return (
<div>
<select onChange=this.onChange>
Object.keys(options).map(key => (
<option key=key value=key>
options[key].text
</option>
))
</select>
<span>options[selected].description</span>
</div>
);
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
1
Thanks, this was a good answer, I just noticed it after selecting the above as the answer; pretty much the same concept, and it worked perfectly...
– Lushmoney
Nov 12 at 16:47
add a comment |
You could keep the key of the selected option in state and show the description
of this selected option.
Example
const options =
open:
text: "Open (Risky)",
description: "Filler text for open"
,
wpa:
text: "WPAWPA2PSK (TKIP / AES)",
description: "Filler text for wpa"
,
wpa2:
text: "WPA2-PSK (AES) (Recommended)",
description: "Filler text for wpa2"
;
class App extends React.Component
state =
options,
selected: Object.keys(options)[0]
;
onChange = event =>
this.setState( selected: event.target.value );
;
render()
const options, selected = this.state;
return (
<div>
<select onChange=this.onChange>
Object.keys(options).map(key => (
<option key=key value=key>
options[key].text
</option>
))
</select>
<span>options[selected].description</span>
</div>
);
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
You could keep the key of the selected option in state and show the description
of this selected option.
Example
const options =
open:
text: "Open (Risky)",
description: "Filler text for open"
,
wpa:
text: "WPAWPA2PSK (TKIP / AES)",
description: "Filler text for wpa"
,
wpa2:
text: "WPA2-PSK (AES) (Recommended)",
description: "Filler text for wpa2"
;
class App extends React.Component
state =
options,
selected: Object.keys(options)[0]
;
onChange = event =>
this.setState( selected: event.target.value );
;
render()
const options, selected = this.state;
return (
<div>
<select onChange=this.onChange>
Object.keys(options).map(key => (
<option key=key value=key>
options[key].text
</option>
))
</select>
<span>options[selected].description</span>
</div>
);
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
const options =
open:
text: "Open (Risky)",
description: "Filler text for open"
,
wpa:
text: "WPAWPA2PSK (TKIP / AES)",
description: "Filler text for wpa"
,
wpa2:
text: "WPA2-PSK (AES) (Recommended)",
description: "Filler text for wpa2"
;
class App extends React.Component
state =
options,
selected: Object.keys(options)[0]
;
onChange = event =>
this.setState( selected: event.target.value );
;
render()
const options, selected = this.state;
return (
<div>
<select onChange=this.onChange>
Object.keys(options).map(key => (
<option key=key value=key>
options[key].text
</option>
))
</select>
<span>options[selected].description</span>
</div>
);
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
const options =
open:
text: "Open (Risky)",
description: "Filler text for open"
,
wpa:
text: "WPAWPA2PSK (TKIP / AES)",
description: "Filler text for wpa"
,
wpa2:
text: "WPA2-PSK (AES) (Recommended)",
description: "Filler text for wpa2"
;
class App extends React.Component
state =
options,
selected: Object.keys(options)[0]
;
onChange = event =>
this.setState( selected: event.target.value );
;
render()
const options, selected = this.state;
return (
<div>
<select onChange=this.onChange>
Object.keys(options).map(key => (
<option key=key value=key>
options[key].text
</option>
))
</select>
<span>options[selected].description</span>
</div>
);
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
answered Nov 12 at 16:12
Tholle
33.8k53760
33.8k53760
1
Thanks, this was a good answer, I just noticed it after selecting the above as the answer; pretty much the same concept, and it worked perfectly...
– Lushmoney
Nov 12 at 16:47
add a comment |
1
Thanks, this was a good answer, I just noticed it after selecting the above as the answer; pretty much the same concept, and it worked perfectly...
– Lushmoney
Nov 12 at 16:47
1
1
Thanks, this was a good answer, I just noticed it after selecting the above as the answer; pretty much the same concept, and it worked perfectly...
– Lushmoney
Nov 12 at 16:47
Thanks, this was a good answer, I just noticed it after selecting the above as the answer; pretty much the same concept, and it worked perfectly...
– Lushmoney
Nov 12 at 16:47
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53265876%2fshow-objects-value-text-depending-on-select-option%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
what have you tried so far?
– Sagiv b.g
Nov 12 at 16:03
honestly not much, because it is supposed to be done in a "react" way (which I am brand new to), and the way I have gotten it to sorta work is very sloppy, so I am looking for some suggestions on a clean solution...
– Lushmoney
Nov 12 at 16:05